Bug/v2/fix rtl (#4958)

frontend/src/core/components/tools/FullscreenToolSurface.tsx

@@ -47,6 +47,7 @@ const FullscreenToolSurface = ({
   const { colorScheme } = useMantineColorScheme();
   const [isExiting, setIsExiting] = useState(false);
   const surfaceRef = useRef<HTMLDivElement>(null);
+  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
 
   // Enable focus trap when surface is active
   useFocusTrap(surfaceRef, !isExiting);
@@ -114,7 +115,10 @@ const FullscreenToolSurface = ({
                 aria-label={toggleLabel}
                 style={{ color: 'var(--right-rail-icon)' }}
               >
-                <DoubleArrowIcon fontSize="small" style={{ transform: 'rotate(180deg)' }} />
+                <DoubleArrowIcon
+                  fontSize="small"
+                  style={{ transform: isRTL ? undefined : 'rotate(180deg)' }}
+                />
               </ActionIcon>
             </Tooltip>
           </div>
@@ -156,4 +160,3 @@ const FullscreenToolSurface = ({
 
 export default FullscreenToolSurface;
 
-

frontend/src/core/components/tools/ToolPanel.css

@@ -111,6 +111,14 @@
   animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
 }
 
+:root[dir='rtl'] .tool-panel__fullscreen-surface-inner {
+  animation-name: tool-panel-fullscreen-slide-in-rtl;
+}
+
+:root[dir='rtl'] .tool-panel__fullscreen-surface-inner.tool-panel__fullscreen-surface-inner--exiting {
+  animation-name: tool-panel-fullscreen-slide-out-rtl;
+}
+
 .tool-panel__fullscreen-header {
   display: flex;
   justify-content: space-between;
@@ -502,6 +510,28 @@
   }
 }
 
+@keyframes tool-panel-fullscreen-slide-in-rtl {
+  from {
+    transform: translateX(6%) scaleX(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes tool-panel-fullscreen-slide-out-rtl {
+  from {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(6%) scaleX(0.85);
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .tool-panel__fullscreen-surface-inner {
     animation: none !important;
@@ -543,4 +573,3 @@
 }
 
 
-

frontend/src/core/components/tools/ToolPanel.tsx

@@ -50,6 +50,7 @@ export default function ToolPanel() {
   const isFullscreenMode = toolPanelMode === 'fullscreen';
   const toolPickerVisible = !readerMode;
   const fullscreenExpanded = isFullscreenMode && leftPanelView === 'toolPicker' && !isMobile && toolPickerVisible;
+  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
 
 
   // Disable right rail buttons when fullscreen mode is active
@@ -150,7 +151,10 @@ export default function ToolPanel() {
                   aria-label={toggleLabel}
                   className="tool-panel__mode-toggle"
                 >
-                  <DoubleArrowIcon fontSize="small" />
+                  <DoubleArrowIcon
+                    fontSize="small"
+                    style={{ transform: isRTL ? 'scaleX(-1)' : undefined }}
+                  />
                 </ActionIcon>
               </Tooltip>
             )}

frontend/src/core/components/tools/compare/hooks/useCompareRightRailButtons.tsx

@@ -50,7 +50,7 @@ export const useCompareRightRailButtons = ({
   baseScrollRef,
   comparisonScrollRef,
 }: UseCompareRightRailButtonsOptions): RightRailButtonWithAction[] => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const isMobile = useIsMobile();
 
   return useMemo<RightRailButtonWithAction[]>(() => [
@@ -184,6 +184,7 @@ export const useCompareRightRailButtons = ({
     setIsScrollLinked,
     zoomLimits,
     t,
+    i18n.language,
     isMobile,
   ]);
 };