chore: use CustomTeleport

app/javascript/dashboard/App.vue

@@ -84,12 +84,6 @@ export default {
         }
       },
     },
-    isRTL: {
-      immediate: true,
-      handler() {
-        this.setElementDir(this.isRTL ? 'rtl' : 'ltr');
-      },
-    },
   },
   mounted() {
     this.initializeColorTheme();
@@ -102,11 +96,6 @@ export default {
     }
   },
   methods: {
-    setElementDir(dir) {
-      // Set dir on document and body
-      document.documentElement.dir = dir;
-      document.body.dir = dir;
-    },
     initializeColorTheme() {
       setColorTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
     },

app/javascript/dashboard/components-next/CustomTeleport.vue

@@ -0,0 +1,28 @@
+<!--
+ * Preserves RTL/LTR context when teleporting content
+ * Ensures direction-specific classes (ltr:tailwind-class, rtl:tailwind-class) work correctly
+ * when content is teleported outside the app's container with [dir] attribute
+-->
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+defineProps({
+  target: {
+    type: String,
+    default: 'body',
+  },
+});
+
+const isRTL = useMapGetter('accounts/isRTL');
+
+const contentDirection = computed(() => (isRTL.value ? 'rtl' : 'ltr'));
+</script>
+
+<template>
+  <Teleport :to="target">
+    <div :dir="contentDirection">
+      <slot />
+    </div>
+  </Teleport>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -13,6 +13,7 @@ import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 import EmailMeta from './EmailMeta.vue';
 import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
 import ForwardMessageForm from 'dashboard/components-next/message/forwardMessage/ForwardMessage.vue';
+import CustomTeleport from 'dashboard/components-next/CustomTeleport.vue';
 
 import { useMessageContext } from '../../provider.js';
 import { useInbox } from 'dashboard/composables/useInbox';
@@ -252,7 +253,7 @@ defineExpose({
       <AttachmentChips :attachments="attachments" class="gap-1" />
     </section>
 
-    <Teleport v-if="showForwardMessageModal" to="body">
+    <CustomTeleport v-if="showForwardMessageModal">
       <ForwardMessageForm
         :message="contentAttributes?.email"
         :content="content"
@@ -266,7 +267,7 @@ defineExpose({
         }"
         @close="closeForwardModal"
       />
-    </Teleport>
+    </CustomTeleport>
   </BaseBubble>
 </template>