fix(mobile): keep the bottom tab bar visible with dynamic viewport height (#1375)

On mobile browsers that place the address bar at the bottom (Safari, Chrome),
100vh measures the largest viewport with the bar retracted, so the mobile
shell was taller than the visible area and the bottom tab bar sat behind the
address bar. Switching the mobile shell container to h-dvh ties its height to
the dynamic viewport, which tracks the visible area as the bar shows and hides
and keeps the tab bar on screen. Desktop is untouched: only the mobile branch
changed, and the tab bar already pads for the home-indicator safe area.
This commit is contained in:
Anso
2026-06-14 22:33:02 -04:00
committed by GitHub
parent 6cc66faa8c
commit 85bcd1341e
+3 -1
View File
@@ -880,7 +880,9 @@ export default function EditorLayout() {
if (isMobile) {
return (
<div className="flex h-screen w-screen flex-col overflow-hidden app-canvas text-foreground">
// h-dvh tracks the visible viewport as the address bar shows and hides, so
// the bottom tab bar stays on screen (100vh would push it behind the bar).
<div className="flex h-dvh w-screen flex-col overflow-hidden app-canvas text-foreground">
{commandPaletteEl}
{mobileSurface === 'content' && !bespokeContent && topBarEl}
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">