RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pin bottom nav to viewport and reserve scroll clearance.

Browse Source 
Track visual viewport for keyboard offset, add bottom spacer, use solid
nav background with safe-area padding, and avoid zero nav offset fallback.
This commit is contained in:
Harkamal Randhawa
2026-05-24 04:34:34 -06:00
parent 68b3da1d13
commit 831170573b
8 changed files with 97 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/globals.css
View File

@@ -5,7 +5,8 @@
@layer base {
:root {
--app-topbar-height: 3.5rem;
--app-nav-offset: var(--bottom-nav-height);
--app-viewport-bottom-offset: 0px;
--app-nav-offset: 6rem;
--bottom-nav-height: 6rem;
--background: 252 38% 10%;
--foreground: 52 100% 88%;
@@ -68,6 +69,7 @@
html {
overflow-x: clip;
scroll-padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
}
body {
@@ -170,7 +172,14 @@
@layer utilities {
.pb-nav {
padding-bottom: var(--app-nav-offset);
padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
}
.pb-nav-safe {
padding-bottom: calc(
var(--app-nav-offset, var(--bottom-nav-height)) +
var(--app-viewport-bottom-offset, 0px)
);
}
.pt-topbar {