From f58bfeb1d0dfaf53ca88916cc575640aad336341 Mon Sep 17 00:00:00 2001
From: AlI <13054619+411A@users.noreply.github.com>
Date: Sun, 26 Oct 2025 04:21:25 +0330
Subject: [PATCH] fix(layout): Fix popup menu for RTL languages (#2327)

---
 apps/readest-app/src/components/Providers.tsx |  8 +++++
 apps/readest-app/src/styles/globals.css       | 29 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/apps/readest-app/src/components/Providers.tsx b/apps/readest-app/src/components/Providers.tsx
index 6c9ad315..2ae24251 100644
--- a/apps/readest-app/src/components/Providers.tsx
+++ b/apps/readest-app/src/components/Providers.tsx
@@ -15,6 +15,7 @@ import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
 import { useBackgroundTexture } from '@/hooks/useBackgroundTexture';
 import { useEinkMode } from '@/hooks/useEinkMode';
 import { getLocale } from '@/utils/misc';
+import { getDirFromUILanguage } from '@/utils/rtl';
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
   const { envConfig, appService } = useEnv();
@@ -28,6 +29,13 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
   useEffect(() => {
     const handlerLanguageChanged = (lng: string) => {
       document.documentElement.lang = lng;
+      // Set RTL class on document for targeted styling without affecting layout
+      const dir = getDirFromUILanguage();
+      if (dir === 'rtl') {
+        document.documentElement.classList.add('ui-rtl');
+      } else {
+        document.documentElement.classList.remove('ui-rtl');
+      }
     };
 
     const locale = getLocale();
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index d59658a6..43b78a0d 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -172,6 +172,35 @@ foliate-view {
   transform: translateX(0);
 }
 
+.ui-rtl .dropdown-left::before,
+.ui-rtl .dropdown-left::after {
+  left: auto;
+  right: 20px;
+}
+
+.ui-rtl .dropdown-right::before,
+.ui-rtl .dropdown-right::after {
+  right: auto;
+  left: 20px;
+}
+
+.ui-rtl .dropdown-end > :where(.dropdown-content) {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+.ui-rtl .settings-menu,
+.ui-rtl .view-menu {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+.ui-rtl .dropdown-content,
+.ui-rtl .settings-menu,
+.ui-rtl .view-menu {
+  direction: rtl;
+}
+
 .dropdown-content.no-triangle::before,
 .dropdown-content.no-triangle::after {
   display: none;