Bug/v2/fix rtl (#4958)

frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx

@@ -18,7 +18,7 @@ export function useFileEditorRightRailButtons({
   onDeselectAll,
   onCloseSelected,
 }: FileEditorRightRailButtonsParams) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const buttons = useMemo<RightRailButtonWithAction[]>(() => [
     {
@@ -54,7 +54,7 @@ export function useFileEditorRightRailButtons({
       visible: totalItems > 0,
       onClick: onCloseSelected,
     },
-  ], [t, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected]);
+  ], [t, i18n.language, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected]);
 
   useRightRailButtons(buttons);
 }

frontend/src/core/components/onboarding/OnboardingTour.css

@@ -31,3 +31,15 @@
       inset 0 0 30px rgba(59, 130, 246, 0.2);
   }
 }
+
+/* RTL: mirror step indicator and controls in Reactour popovers */
+:root[dir='rtl'] .reactour__popover {
+  direction: rtl;
+}
+
+/* Minimal overrides retained for glow only */
+
+:root[dir='rtl'] .reactour__badge {
+  left: auto;
+  right: 16px;
+}

frontend/src/core/components/onboarding/OnboardingTour.tsx

@@ -7,6 +7,7 @@ import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import { useTourOrchestration } from '@app/contexts/TourOrchestrationContext';
 import { useAdminTourOrchestration } from '@app/contexts/AdminTourOrchestrationContext';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CheckIcon from '@mui/icons-material/Check';
 import TourWelcomeModal from '@app/components/onboarding/TourWelcomeModal';
 import '@app/components/onboarding/OnboardingTour.css';
@@ -70,6 +71,7 @@ export default function OnboardingTour() {
   const { t } = useTranslation();
   const { completeTour, showWelcomeModal, setShowWelcomeModal, startTour, tourType, isOpen } = useOnboarding();
   const { openFilesModal, closeFilesModal } = useFilesModalContext();
+  const isRTL = typeof document !== 'undefined' ? document.documentElement.dir === 'rtl' : false;
 
   // Helper to add glow to multiple elements
   const addGlowToElements = (selectors: string[]) => {
@@ -438,6 +440,7 @@ export default function OnboardingTour() {
             handleCloseTour(clickProps);
           }
         }}
+        rtl={isRTL}
         styles={{
           popover: (base) => ({
             ...base,
@@ -466,21 +469,19 @@ export default function OnboardingTour() {
         showBadge={false}
         showCloseButton={true}
         disableInteraction={true}
-        disableDotsNavigation={true}
+        disableDotsNavigation={false}
         prevButton={() => null}
         nextButton={({ currentStep, stepsLength, setCurrentStep, setIsOpen }) => {
           const isLast = currentStep === stepsLength - 1;
-
+          const ArrowIcon = isRTL ? ArrowBackIcon : ArrowForwardIcon;
           return (
             <ActionIcon
-              onClick={() => {
+              onClick={() => advanceTour({ setCurrentStep, currentStep, steps, setIsOpen })}
-                advanceTour({ setCurrentStep, currentStep, steps, setIsOpen });
-              }}
               variant="subtle"
               size="lg"
               aria-label={isLast ? t('onboarding.finish', 'Finish') : t('onboarding.next', 'Next')}
             >
-              {isLast ? <CheckIcon /> : <ArrowForwardIcon />}
+              {isLast ? <CheckIcon /> : <ArrowIcon />}
             </ActionIcon>
           );
         }}

frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx

@@ -41,7 +41,7 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
     closePdf,
   } = params;
 
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   // Lift i18n labels out of memo for clarity
   const selectAllLabel = t('rightRail.selectAll', 'Select All');
@@ -144,6 +144,7 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
     ];
   }, [
     t,
+    i18n.language,
     selectAllLabel,
     deselectAllLabel,
     selectByNumberLabel,

frontend/src/core/components/shared/AllToolsNavButton.tsx

@@ -10,9 +10,14 @@ import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
 interface AllToolsNavButtonProps {
   activeButton: string;
   setActiveButton: (id: string) => void;
+  tooltipPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 
-const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
+const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
+  activeButton,
+  setActiveButton,
+  tooltipPosition = 'right'
+}) => {
   const { t } = useTranslation();
   const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
   const { getHomeNavigation } = useSidebarNavigation();
@@ -40,7 +45,13 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   );
 
   return (
-    <Tooltip content={t("quickAccess.allTools", "Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
+    <Tooltip
+      content={t("quickAccess.allTools", "Tools")}
+      position={tooltipPosition}
+      arrow
+      containerStyle={{ marginTop: "-1rem" }}
+      maxWidth={200}
+    >
       <div className="flex flex-col items-center gap-1 mt-4 mb-2">
         <ActionIcon
           component="a"
@@ -70,4 +81,3 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
 export default AllToolsNavButton;
 
-

frontend/src/core/components/shared/LanguageSelector.tsx

@@ -185,6 +185,11 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
 
         // Clear ripple effect
         setTimeout(() => setRippleEffect(null), 100);
+
+        // Force a full reload so RTL/LTR layout and tooltips re-evaluate correctly
+        if (typeof window !== 'undefined') {
+          window.location.reload();
+        }
       }, 300);
     }, 200);
   };

frontend/src/core/components/shared/QuickAccessBar.tsx

@@ -39,6 +39,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const isOverflow = useIsOverflowing(scrollableRef);
 
+  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+
   // Open modal if URL is at /settings/*
   useEffect(() => {
     const isSettings = location.pathname.startsWith('/settings');
@@ -189,9 +191,6 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       ref={ref}
       data-sidebar="quick-access"
       className={`h-screen flex flex-col w-16 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
-      style={{
-        borderRight: '1px solid var(--border-default)'
-      }}
     >
       {/* Fixed header outside scrollable area */}
       <div className="quick-access-header">
@@ -278,7 +277,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                 // If admin, show menu with both options
                 return (
                   <div key={buttonConfig.id} data-tour="help-button">
-                    <Menu position="right" offset={10} zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}>
+                    <Menu position={isRTL ? 'left' : 'right'} offset={10} zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}>
                       <Menu.Target>
                         <div>{renderNavButton(buttonConfig, index)}</div>
                       </Menu.Target>

frontend/src/core/components/shared/RightRail.tsx

@@ -19,19 +19,22 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 
 import { useSidebarContext } from '@app/contexts/SidebarContext';
 import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '@app/types/rightRail';
+import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
 
 const SECTION_ORDER: RightRailSection[] = ['top', 'middle', 'bottom'];
 
 function renderWithTooltip(
   node: React.ReactNode,
-  tooltip: React.ReactNode | undefined
+  tooltip: React.ReactNode | undefined,
+  position: 'left' | 'right',
+  offset: number
 ) {
   if (!tooltip) return node;
 
   const portalTarget = typeof document !== 'undefined' ? document.body : undefined;
 
   return (
-    <Tooltip content={tooltip} position="left" offset={12} arrow portalTarget={portalTarget}>
+    <Tooltip content={tooltip} position={position} offset={offset} arrow portalTarget={portalTarget}>
       <div className="right-rail-tooltip-wrapper">{node}</div>
     </Tooltip>
   );
@@ -39,6 +42,7 @@ function renderWithTooltip(
 
 export default function RightRail() {
   const { sidebarRefs } = useSidebarContext();
+  const { position: tooltipPosition, offset: tooltipOffset } = useRightRailTooltipSide(sidebarRefs);
   const { t } = useTranslation();
   const viewerContext = React.useContext(ViewerContext);
   const { toggleTheme, themeMode } = useRainbowThemeContext();
@@ -117,9 +121,9 @@ export default function RightRail() {
         </ActionIcon>
       );
 
-      return renderWithTooltip(buttonNode, btn.tooltip);
+      return renderWithTooltip(buttonNode, btn.tooltip, tooltipPosition, tooltipOffset);
     },
-    [actions, allButtonsDisabled, disableForFullscreen]
+    [actions, allButtonsDisabled, disableForFullscreen, tooltipPosition, tooltipOffset]
   );
 
   const handleExportAll = useCallback(async () => {
@@ -203,14 +207,18 @@ export default function RightRail() {
                 <DarkModeIcon sx={{ fontSize: '1.5rem' }} />
               )}
             </ActionIcon>,
-            t('rightRail.toggleTheme', 'Toggle Theme')
+            t('rightRail.toggleTheme', 'Toggle Theme'),
+            tooltipPosition,
+            tooltipOffset
           )}
 
           {renderWithTooltip(
             <div style={{ display: 'inline-flex' }}>
               <LanguageSelector position="left-start" offset={6} compact />
             </div>,
-            t('rightRail.language', 'Language')
+            t('rightRail.language', 'Language'),
+            tooltipPosition,
+            tooltipOffset
           )}
 
           {renderWithTooltip(
@@ -226,7 +234,9 @@ export default function RightRail() {
             >
               <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
             </ActionIcon>,
-            downloadTooltip
+            downloadTooltip,
+            tooltipPosition,
+            tooltipOffset
           )}
         </div>
 

frontend/src/core/components/shared/Tooltip.tsx

@@ -37,7 +37,7 @@ export interface TooltipProps {
 
 export const Tooltip: React.FC<TooltipProps> = ({
   sidebarTooltip = false,
-  position = 'right',
+  position,
   content,
   tips,
   children,
@@ -81,6 +81,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const isControlled = controlledOpen !== undefined;
   const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled;
 
+  const resolvedPosition: NonNullable<TooltipProps['position']> = useMemo(() => {
+    const htmlDir = typeof document !== 'undefined' ? document.documentElement.dir : 'ltr';
+    const isRTL = htmlDir === 'rtl';
+    const base = position ?? 'right';
+    if (!isRTL) return base as NonNullable<TooltipProps['position']>;
+    if (base === 'left') return 'right';
+    if (base === 'right') return 'left';
+    return base as NonNullable<TooltipProps['position']>;
+  }, [position]);
+
   const setOpen = useCallback(
     (newOpen: boolean) => {
       if (newOpen === open) return; // avoid churn
@@ -94,7 +104,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const { coords, positionReady } = useTooltipPosition({
     open,
     sidebarTooltip,
-    position,
+    position: resolvedPosition,
     gap,
     triggerRef,
     tooltipRef,
@@ -145,8 +155,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
       left: 'tooltip-arrow-left',
       right: 'tooltip-arrow-right',
     };
-    return map[position] || map.right;
+    return map[resolvedPosition] || map.right;
-  }, [position, sidebarTooltip]);
+  }, [resolvedPosition, sidebarTooltip]);
 
   const getArrowStyleClass = useCallback(
     (key: string) =>
@@ -332,7 +342,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
           className={`${styles['tooltip-arrow']} ${getArrowStyleClass(arrowClass!)}`}
           style={
             coords.arrowOffset !== null
-              ? { [position === 'top' || position === 'bottom' ? 'left' : 'top']: coords.arrowOffset }
+              ? { [resolvedPosition === 'top' || resolvedPosition === 'bottom' ? 'left' : 'top']: coords.arrowOffset }
               : undefined
           }
         />

frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -24,11 +24,12 @@ import { Tooltip } from '@app/components/shared/Tooltip';
 interface ActiveToolButtonProps {
   activeButton: string;
   setActiveButton: (id: string) => void;
+  tooltipPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 
 const NAV_IDS = ['read', 'sign', 'automate'];
 
-const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton }) => {
+const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, tooltipPosition = 'right' }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
   const { getHomeNavigation } = useSidebarNavigation();
 
@@ -139,7 +140,12 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
         {indicatorTool && (
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
-              <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
+              <Tooltip
+                content={isBackHover ? 'Back to all tools' : indicatorTool.name}
+                position={tooltipPosition}
+                arrow
+                maxWidth={140}
+              >
                 <ActionIcon
                   component="a"
                   href={getHomeNavigation().href}
@@ -189,4 +195,3 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
 
 export default ActiveToolButton;
 
-

frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css

@@ -43,6 +43,10 @@
   max-width: 4rem;
   position: relative;
   z-index: 10;
+  border-right: 1px solid var(--border-default);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  direction: ltr; /* keep layout stable when document is rtl */
 }
 
 /* Rainbow mode container */
@@ -53,6 +57,17 @@
   max-width: 4rem;
   position: relative;
   z-index: 10;
+  border-right: 1px solid var(--border-default);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  direction: ltr;
+}
+
+/* RTL adjustments keep the bar on-screen and separated from content */
+:root[dir='rtl'] .quick-access-bar-main,
+:root[dir='rtl'] .quick-access-bar-main.rainbow-mode {
+  border-right: none;
+  border-left: 1px solid var(--border-default);
 }
 
 /* Header padding */

frontend/src/core/components/shared/rightRail/ViewerAnnotationControls.tsx

@@ -11,6 +11,8 @@ import { generateThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
 import { createProcessedFile } from '@app/contexts/file/fileActions';
 import { createStirlingFile, createNewStirlingFileStub } from '@app/types/fileContext';
 import { useNavigationState } from '@app/contexts/NavigationContext';
+import { useSidebarContext } from '@app/contexts/SidebarContext';
+import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
 
 interface ViewerAnnotationControlsProps {
   currentView: string;
@@ -19,6 +21,8 @@ interface ViewerAnnotationControlsProps {
 
 export default function ViewerAnnotationControls({ currentView, disabled = false }: ViewerAnnotationControlsProps) {
   const { t } = useTranslation();
+  const { sidebarRefs } = useSidebarContext();
+  const { position: tooltipPosition, offset: tooltipOffset } = useRightRailTooltipSide(sidebarRefs);
   const [selectedColor, setSelectedColor] = useState('#000000');
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [isHoverColorPickerOpen, setIsHoverColorPickerOpen] = useState(false);
@@ -53,7 +57,7 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
   return (
     <>
       {/* Annotation Visibility Toggle */}
-      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position="left" offset={12} arrow portalTarget={document.body}>
+      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
         <ActionIcon
           variant="subtle"
           radius="md"
@@ -130,7 +134,7 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
         </div>
       ) : (
         // When inactive: Show "Draw" tooltip
-        <Tooltip content={t('rightRail.draw', 'Draw')} position="left" offset={12} arrow portalTarget={document.body}>
+        <Tooltip content={t('rightRail.draw', 'Draw')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
           <ActionIcon
             variant="subtle"
             radius="md"
@@ -156,7 +160,7 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
       )}
 
       {/* Save PDF with Annotations */}
-      <Tooltip content={t('rightRail.save', 'Save')} position="left" offset={12} arrow portalTarget={document.body}>
+      <Tooltip content={t('rightRail.save', 'Save')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
         <ActionIcon
           variant="subtle"
           radius="md"

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,
   ]);
 };

frontend/src/core/components/viewer/useViewerRightRailButtons.tsx

@@ -7,11 +7,15 @@ import LocalIcon from '@app/components/shared/LocalIcon';
 import { Tooltip } from '@app/components/shared/Tooltip';
 import { SearchInterface } from '@app/components/viewer/SearchInterface';
 import ViewerAnnotationControls from '@app/components/shared/rightRail/ViewerAnnotationControls';
+import { useSidebarContext } from '@app/contexts/SidebarContext';
+import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
 
 export function useViewerRightRailButtons() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const viewer = useViewer();
   const [isPanning, setIsPanning] = useState<boolean>(() => viewer.getPanState()?.isPanning ?? false);
+  const { sidebarRefs } = useSidebarContext();
+  const { position: tooltipPosition } = useRightRailTooltipSide(sidebarRefs, 12);
 
   // Lift i18n labels out of memo for clarity
   const searchLabel = t('rightRail.search', 'Search PDF');
@@ -30,8 +34,8 @@ export function useViewerRightRailButtons() {
         section: 'top' as const,
         order: 10,
         render: ({ disabled }) => (
-          <Tooltip content={searchLabel} position="left" offset={12} arrow portalTarget={document.body}>
+          <Tooltip content={searchLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
-            <Popover position="left" withArrow shadow="md" offset={8}>
+            <Popover position={tooltipPosition} withArrow shadow="md" offset={8}>
               <Popover.Target>
                 <div style={{ display: 'inline-flex' }}>
                   <ActionIcon
@@ -61,7 +65,7 @@ export function useViewerRightRailButtons() {
         section: 'top' as const,
         order: 20,
         render: ({ disabled }) => (
-          <Tooltip content={panLabel} position="left" offset={12} arrow portalTarget={document.body}>
+          <Tooltip content={panLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
             <ActionIcon
               variant={isPanning ? 'default' : 'subtle'}
               color={undefined}
@@ -132,7 +136,7 @@ export function useViewerRightRailButtons() {
         )
       }
     ];
-  }, [t, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel, bookmarkLabel]);
+  }, [t, i18n.language, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel, bookmarkLabel, tooltipPosition]);
 
   useRightRailButtons(viewerButtons);
 }

frontend/src/core/hooks/tools/useToolPanelGeometry.ts

@@ -42,11 +42,26 @@ export function useToolPanelGeometry({
     const computeAndSetGeometry = () => {
       const rect = panelEl.getBoundingClientRect();
       const rail = rightRailEl();
-      const rightOffset = rail ? Math.max(0, window.innerWidth - rail.getBoundingClientRect().left) : 0;
+      const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
-      const width = Math.max(360, window.innerWidth - rect.left - rightOffset);
+      const railRect = rail?.getBoundingClientRect();
+      const railIsOnRight = railRect ? railRect.right > window.innerWidth / 2 : false;
+      const rightOffset = railRect && railIsOnRight ? Math.max(0, window.innerWidth - railRect.right) : 0;
+      let width: number;
+      let left: number;
+
+      if (isRTL) {
+        // In RTL, QuickAccessBar is on the right, so start after it (using rect.right as the right edge)
+        const quickAccessRect = quickAccessRef.current?.getBoundingClientRect();
+        const quickAccessWidth = quickAccessRect ? quickAccessRect.width : 0;
+        width = Math.max(360, window.innerWidth - quickAccessWidth - rightOffset);
+        left = quickAccessWidth;
+      } else {
+        width = Math.max(360, window.innerWidth - rect.left - rightOffset);
+        left = rect.left;
+      }
       const height = Math.max(rect.height, window.innerHeight - rect.top);
       setGeometry({
-        left: rect.left,
+        left,
         top: rect.top,
         width,
         height,

frontend/src/core/hooks/useRightRailTooltipSide.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { SidebarRefs } from '@app/types/sidebar';
+
+export function useRightRailTooltipSide(
+  sidebarRefs?: SidebarRefs,
+  defaultOffset: number = 16
+): { position: 'left' | 'right'; offset: number } {
+  const [position, setPosition] = useState<'left' | 'right'>('left');
+
+  useEffect(() => {
+    const computePosition = () => {
+      const rail = sidebarRefs?.rightRailRef?.current;
+      const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+
+      // Fallback to left if we can't measure
+      if (!rail || typeof window === 'undefined') {
+        setPosition(isRTL ? 'left' : 'left');
+        return;
+      }
+
+      const rect = rail.getBoundingClientRect();
+      const center = rect.left + rect.width / 2;
+      const preferred = center > window.innerWidth / 2 ? 'left' : 'right';
+      setPosition(isRTL ? 'left' : preferred);
+    };
+
+    computePosition();
+    window.addEventListener('resize', computePosition);
+    return () => window.removeEventListener('resize', computePosition);
+  }, [sidebarRefs]);
+
+  return { position, offset: defaultOffset };
+}

frontend/src/core/hooks/useTooltipPosition.ts

@@ -74,6 +74,7 @@ export function useTooltipPosition({
 
   // Fallback sidebar position (only used as last resort)
   const sidebarLeft = 240;
+  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
 
   const updatePosition = () => {
     if (!triggerRef.current || !open) return;
@@ -93,7 +94,11 @@ export function useTooltipPosition({
       }
 
       const sidebarInfo = getSidebarInfo(sidebarRefs, sidebarState);
-      const currentSidebarRight = sidebarInfo.rect ? sidebarInfo.rect.right : sidebarLeft;
+      const rect = sidebarInfo.rect;
+      if (!rect) {
+        setPositionReady(false);
+        return;
+      }
 
       // Only show tooltip if we have the tool panel active
       if (!sidebarInfo.isToolPanelActive) {
@@ -102,13 +107,18 @@ export function useTooltipPosition({
         return;
       }
 
-      // Position to the right of active sidebar with 20px gap
+      const tooltipRect = tooltipRef.current?.getBoundingClientRect() || null;
-      left = currentSidebarRight + 20;
+
+      // Position adjacent to sidebar; mirror for RTL
+      if (isRTL) {
+        left = rect.left - (tooltipRect?.width || 0) - 20;
+      } else {
+        left = rect.right + 20;
+      }
       top = triggerRect.top; // Align top of tooltip with trigger element
 
       // Only clamp if we have tooltip dimensions
-      if (tooltipRef.current) {
+      if (tooltipRect) {
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
         const maxTop = window.innerHeight - tooltipRect.height - 4;
         const originalTop = top;
         top = clamp(top, 4, maxTop);