fix: tab bar fills iOS home-indicator zone (no empty band below icons)
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) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01G796GsLCvJQKVN7hwV2cDx
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user