serversdown/project-lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: color-match the iOS home-indicator strip to the bottom bar

Browse Source 
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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G796GsLCvJQKVN7hwV2cDx
This commit is contained in:
serversdown
2026-06-30 05:27:44 +00:00
parent 393ca65dee
commit fb6b44a82e
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lyra/web/static/index.html
+2 -2
View File
@@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8" />
<title>Lyra Core Chat</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css?v=7" />
<!-- PWA -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Lyra" />
<meta name="theme-color" content="#070707" />
<meta name="theme-color" content="#141414" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" href="icon-192.png" />
<link rel="manifest" href="manifest.json" />
lyra/web/static/style.css
+16 -8
View File
@@ -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);
}