fix(layout): Fix popup menu for RTL languages (#2327)

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();

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;