diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index fac53434f..e51958e9e 100644
--- a/app/javascript/dashboard/App.vue
+++ b/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);
     },
diff --git a/app/javascript/dashboard/components-next/CustomTeleport.vue b/app/javascript/dashboard/components-next/CustomTeleport.vue
new file mode 100644
index 000000000..73ccddf6e
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 5e2e952f7..e0e8137f7 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/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>
 
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index be6e8af49..4be41f8b2 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html>
   <head>
     <title>
       <%= @global_config['INSTALLATION_NAME'] %>
@@ -67,7 +67,7 @@
     <%= vite_client_tag %>
     <%= vite_javascript_tag @application_pack %>
   </head>
-  <body class="text-slate-600" dir="ltr">
+  <body class="text-slate-600">
     <div id="app"></div>
     <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
     <%= yield %>
