diff --git a/frontend/src/components/MobileTitleBar.tsx b/frontend/src/components/MobileTitleBar.tsx
index caa8db7..8883328 100644
--- a/frontend/src/components/MobileTitleBar.tsx
+++ b/frontend/src/components/MobileTitleBar.tsx
@@ -68,6 +68,12 @@ const MobileTitleBar = ({
         } else if (typeof window !== 'undefined') {
             window.addEventListener('resize', updateMetrics);
         }
+        // Re-measure after fonts are loaded
+        if (typeof document !== 'undefined' && document.fonts?.ready) {
+            document.fonts.ready.then(() => {
+                updateMetrics();
+            });
+        }
 
         return () => {
             resizeObserver?.disconnect();
diff --git a/frontend/src/components/TabsScroller.tsx b/frontend/src/components/TabsScroller.tsx
index 10f509c..b08efc5 100644
--- a/frontend/src/components/TabsScroller.tsx
+++ b/frontend/src/components/TabsScroller.tsx
@@ -9,6 +9,7 @@ import {
     type PointerEvent,
     type MouseEvent
 } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
 
 type TabsScrollerProps = {
     className: string;
@@ -36,6 +37,7 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
         },
         ref
     ) => {
+        const { tabBarPosition } = useTheme();
         const sliderRef = useRef<HTMLDivElement | null>(null);
         const rafRef = useRef(0);
         const [showLeft, setShowLeft] = useState(false);
@@ -166,6 +168,12 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
             } else if (typeof window !== 'undefined') {
                 window.addEventListener('resize', scheduleOverflowUpdate);
             }
+            // Re-measure after fonts are loaded (icons may affect height)
+            if (typeof document !== 'undefined' && document.fonts?.ready) {
+                document.fonts.ready.then(() => {
+                    scheduleOverflowUpdate();
+                });
+            }
             return () => {
                 node.removeEventListener('scroll', handleScroll);
                 resizeObserver?.disconnect();
@@ -187,6 +195,23 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
             };
         }, []);
 
+        // Re-measure when tab bar position changes (e.g., from 'top' to 'responsive')
+        // This ensures correct measurements after backend loads and position changes
+        useEffect(() => {
+            if (tabBarPosition === 'responsive' || tabBarPosition === 'bottom') {
+                // Reset refs to force re-measurement
+                sliderHeightRef.current = 0;
+                heightRef.current = 0;
+                pillHeightRef.current = 0;
+                // Schedule update after a brief delay to ensure layout is complete
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        updateOverflow();
+                    });
+                });
+            }
+        }, [tabBarPosition, updateOverflow]);
+
         const scrollByAmount = useCallback(
             (direction: 'left' | 'right') => {
                 const node = sliderRef.current;