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);
   }