fix: correct report drilldown drawer position in RTL/LTR (#14919)

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue

@@ -225,7 +225,7 @@ const openRecord = () => {
         </div>
       </div>
       <div
-        class="ml-2 flex shrink-0 items-center justify-end gap-1 text-right text-xs leading-4 text-n-slate-10"
+        class="ms-2 flex shrink-0 items-center justify-end gap-1 text-end text-xs leading-4 text-n-slate-10"
       >
         <span
           v-if="isMessageRecord"

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { formatTime } from '@chatwoot/utils';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 import { useReportDrilldown } from '../composables/useReportDrilldown';
 import ReportDrilldownCard from './ReportDrilldownCard.vue';
 
@@ -195,7 +196,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Teleport to="body">
+  <TeleportWithDirection to="body">
     <Transition name="report-drilldown-fade">
       <div
         v-if="isOpen"
@@ -205,7 +206,7 @@ onBeforeUnmount(() => {
       >
         <aside
           ref="drawerRef"
-          class="fixed inset-y-0 right-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
+          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
           role="dialog"
           aria-modal="true"
           :aria-label="title"
@@ -240,6 +241,7 @@ onBeforeUnmount(() => {
                 slate
                 size="sm"
                 icon="i-ph-caret-left"
+                class="rtl:rotate-180"
                 :disabled="!canPrev"
                 :aria-label="$t('REPORT.DRILLDOWN.PREVIOUS_BUCKET')"
                 @click="navigate(-1)"
@@ -249,6 +251,7 @@ onBeforeUnmount(() => {
                 slate
                 size="sm"
                 icon="i-ph-caret-right"
+                class="rtl:rotate-180"
                 :disabled="!canNext"
                 :aria-label="$t('REPORT.DRILLDOWN.NEXT_BUCKET')"
                 @click="navigate(1)"
@@ -308,5 +311,5 @@ onBeforeUnmount(() => {
         </aside>
       </div>
     </Transition>
-  </Teleport>
+  </TeleportWithDirection>
 </template>

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: '<div><slot /></div>',
+          },
           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();