From 393ca65deebbcbb8c7275387eb7e97a71936f334 Mon Sep 17 00:00:00 2001 From: serversdown Date: Mon, 29 Jun 2026 00:30:27 +0000 Subject: [PATCH] fix: tab bar fills iOS home-indicator zone (no empty band below icons) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Switch the mobile #chat shell from 100dvh to full-height (100vh/100lvh) and pad the tab bar by env(safe-area-inset-bottom) so the bar reaches the physical bottom and its icons sit above the home indicator — instead of leaving a same-color band below the icons. Keyboard-pinning path (body.kb #chat) unchanged. Per building-ios-pwas skill; needs on-device verification. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01G796GsLCvJQKVN7hwV2cDx --- lyra/web/static/style.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lyra/web/static/style.css b/lyra/web/static/style.css index d483dea..cf8754e 100644 --- a/lyra/web/static/style.css +++ b/lyra/web/static/style.css @@ -837,8 +837,9 @@ select:hover { position: fixed; top: 0; left: 0; right: 0; width: 100%; - height: 100dvh; /* the *visible* viewport (excludes the home-indicator zone); - overrides the base 95vh. Body bg matches the bar below it. */ + height: 100vh; /* full physical screen (incl. home-indicator zone) so the + tab bar can fill that zone instead of leaving an empty band */ + height: 100lvh; /* explicit: largest viewport == physical screen */ background: var(--bg-dark); border-radius: 0; border: none; @@ -923,7 +924,9 @@ select:hover { flex: none; /* never let it be compressed/clipped by the flex column */ border-top: 1px solid var(--border); background: var(--bg-elev); - padding-bottom: 6px; /* 100dvh already excludes the home-indicator zone */ + /* shell is full-height (100vh), so the bar reaches the physical bottom; pad its + icons up above the home indicator and let its bg fill the inset zone. */ + padding-bottom: calc(6px + env(safe-area-inset-bottom)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }