Bug/v2/fix rtl (#4958)

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 */
@@ -276,4 +291,4 @@
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
-}
+}