From fb6b44a82e84e925b124fabd8fa1b3c3c53afaae Mon Sep 17 00:00:00 2001 From: serversdown Date: Tue, 30 Jun 2026 05:27:44 +0000 Subject: [PATCH] fix: color-match the iOS home-indicator strip to the bottom bar iOS won't render interactive content in the bottom ~59px (home-indicator zone) and underreports innerHeight by the top inset, so the bar can't be pushed lower. Instead, keep the shell at 100dvh (no clipping) and paint the strip below it the same color as the tab bar (html/body bg + a lighter --bg-line bar + matched theme-color) so it reads as the bar continuing to the edge rather than an empty gap. Cache-bust the stylesheet so the PWA picks it up. Tried the boolinator innerHeight-correction approach (adding the top inset back via --actual-vh); it clipped the icons on-device, so reverted. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01G796GsLCvJQKVN7hwV2cDx --- lyra/web/static/index.html | 4 ++-- lyra/web/static/style.css | 24 ++++++++++++++++-------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/lyra/web/static/index.html b/lyra/web/static/index.html index 499f133..df4682b 100644 --- a/lyra/web/static/index.html +++ b/lyra/web/static/index.html @@ -3,14 +3,14 @@ Lyra Core Chat - + - + diff --git a/lyra/web/static/style.css b/lyra/web/static/style.css index cf8754e..e41aeb4 100644 --- a/lyra/web/static/style.css +++ b/lyra/web/static/style.css @@ -62,6 +62,12 @@ html { text-size-adjust: 100%; } +html { + /* Paints the iOS home-indicator strip below the dvh shell; match the tab bar so the + bar looks like it continues to the physical bottom edge. */ + background: var(--bg-line); +} + body { margin: 0; background: var(--bg-dark); @@ -830,16 +836,17 @@ select:hover { @media screen and (max-width: 768px) { body { padding: 0; - background: var(--bg-elev); /* matches the tab bar so any strip below #chat is seamless */ + background: var(--bg-line); /* matches the tab bar so any strip below #chat is seamless */ } #chat { position: fixed; top: 0; left: 0; right: 0; width: 100%; - 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 */ + height: 100vh; /* fallback for old browsers */ + height: 100dvh; /* the *visible* viewport — keep all content (incl. the tab bar) + inside what iOS actually paints, so nothing is clipped into the + home-indicator dead zone. The strip below is matched in color. */ background: var(--bg-dark); border-radius: 0; border: none; @@ -923,10 +930,11 @@ select:hover { display: flex; flex: none; /* never let it be compressed/clipped by the flex column */ border-top: 1px solid var(--border); - background: var(--bg-elev); - /* 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)); + background: var(--bg-line); /* lighter than the page so it reads as a solid bar */ + /* Shell is 100dvh, so the bar sits at the bottom of the rendered area with the icons + fully visible. Minimal padding keeps them low; the home-indicator strip just below + the rendered area is painted the same color (html bg) so the bar looks continuous. */ + padding-bottom: 4px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }