diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index e51958e9e..fac53434f 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -84,6 +84,12 @@ export default {
}
},
},
+ isRTL: {
+ immediate: true,
+ handler() {
+ this.setElementDir(this.isRTL ? 'rtl' : 'ltr');
+ },
+ },
},
mounted() {
this.initializeColorTheme();
@@ -96,6 +102,11 @@ 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/NewConversation/components/InboxSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
index 7794d5bdd..3cafacb21 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 8988201fb..2e53ad0dd 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
v-if="showDropdownMenu"
:menu-items="filteredMenuItems"
:is-searching="isLoading"
- class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+ class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
@action="handleDropdownAction"
/>
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 4be41f8b2..be6e8af49 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -1,5 +1,5 @@
-
+
<%= @global_config['INSTALLATION_NAME'] %>
@@ -67,7 +67,7 @@
<%= vite_client_tag %>
<%= vite_javascript_tag @application_pack %>
</head>
- <body class="text-slate-600">
+ <body class="text-slate-600" dir="ltr">
<div id="app"></div>
<noscript id="noscript">This app works best with JavaScript enabled.</noscript>
<%= yield %>