diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue
index 327db6291..b9df2e900 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue
@@ -225,7 +225,7 @@ const openRecord = () => {
{
-
+
{
>
-
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js
index d6cec362f..10bc38bee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js
@@ -79,7 +79,9 @@ describe('ReportDrilldownDrawer.vue', () => {
attachTo: options?.attachTo,
global: {
stubs: {
- Teleport: true,
+ TeleportWithDirection: {
+ template: '
',
+ },
Transition: false,
Spinner: true,
Button: {
@@ -248,6 +250,27 @@ describe('ReportDrilldownDrawer.vue', () => {
expect(wrapper.text()).toContain('5 conversations');
});
+ it('anchors the drawer to the inline-end edge so it flips in RTL', async () => {
+ const wrapper = mountDrawer();
+ await flushPromises();
+
+ const drawer = wrapper.get('[role="dialog"]');
+ expect(drawer.classes()).toContain('end-0');
+ expect(drawer.classes()).not.toContain('right-0');
+ });
+
+ it('flips the navigation caret icons in RTL', async () => {
+ const wrapper = mountDrawer({ props: { canPrev: true, canNext: true } });
+ await flushPromises();
+
+ expect(
+ wrapper.get('[aria-label="REPORT.DRILLDOWN.PREVIOUS_BUCKET"]').classes()
+ ).toContain('rtl:rotate-180');
+ expect(
+ wrapper.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]').classes()
+ ).toContain('rtl:rotate-180');
+ });
+
it('emits close when the drawer close button is clicked', async () => {
const wrapper = mountDrawer();
await flushPromises();