matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile bottom padding on first page load

Browse Source 
Re-measure tab bar height when tabBarPosition changes from 'top' to
'responsive'. This fixes the issue where bottom padding was incorrect
on first load because the CSS variable was measured before the backend
loaded the responsive position setting.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2026-01-11 14:07:58 +01:00
parent b2eed5375b
commit 76a3e51bbc
2 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/MobileTitleBar.tsx
View File

@@ -68,6 +68,12 @@ const MobileTitleBar = ({
} else if (typeof window !== 'undefined') { } else if (typeof window !== 'undefined') {
window.addEventListener('resize', updateMetrics); window.addEventListener('resize', updateMetrics);
} }
// Re-measure after fonts are loaded
if (typeof document !== 'undefined' && document.fonts?.ready) {
document.fonts.ready.then(() => {
updateMetrics();
});
}
return () => { return () => {
resizeObserver?.disconnect(); resizeObserver?.disconnect();

25
frontend/src/components/TabsScroller.tsx
View File

@@ -9,6 +9,7 @@ import {
type PointerEvent, type PointerEvent,
type MouseEvent type MouseEvent
} from 'react'; } from 'react';
import { useTheme } from '../contexts/ThemeContext';
type TabsScrollerProps = { type TabsScrollerProps = {
className: string; className: string;
@@ -36,6 +37,7 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
}, },
ref ref
) => { ) => {
const { tabBarPosition } = useTheme();
const sliderRef = useRef<HTMLDivElement | null>(null); const sliderRef = useRef<HTMLDivElement | null>(null);
const rafRef = useRef(0); const rafRef = useRef(0);
const [showLeft, setShowLeft] = useState(false); const [showLeft, setShowLeft] = useState(false);
@@ -166,6 +168,12 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
} else if (typeof window !== 'undefined') { } else if (typeof window !== 'undefined') {
window.addEventListener('resize', scheduleOverflowUpdate); 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 () => { return () => {
node.removeEventListener('scroll', handleScroll); node.removeEventListener('scroll', handleScroll);
resizeObserver?.disconnect(); 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( const scrollByAmount = useCallback(
(direction: 'left' | 'right') => { (direction: 'left' | 'right') => {
const node = sliderRef.current; const node = sliderRef.current;