mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-26 11:49:16 +00:00
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user