GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore mobile bottom nav with scroll-to-hide behavior

Browse Source 
Bring back the mobile bottom navigation bar with Home, Notifications, and
Search buttons. The nav slides out of view when scrolling down and reappears
on upward scroll, keeping the viewport uncluttered while reading. Search
retains the popover account search sheet for fast profile lookup without
navigating away. Updated CSS height calculations for full-screen pages
(AI chat, vines, livestream) and FAB positioning to account for the nav.
This commit is contained in:
Alex Gleason
2026-03-13 22:47:17 -05:00
parent 3727975178
commit 59311e6b2c
7 changed files with 191 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+14 -9
View File
@@ -40,9 +40,14 @@
bottom: env(safe-area-inset-bottom, 0px);
}
/* FAB bottom offset: clears safe area inset */
/* FAB bottom offset: clears bottom nav + safe area inset on mobile */
.bottom-fab {
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
bottom: calc(1.5rem + 3.5rem + env(safe-area-inset-bottom, 0px));
}
/* Position above mobile bottom nav (h-14 = 3.5rem) + safe area */
.bottom-mobile-nav {
bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}
/* Mobile top bar height (48px) + safe area inset for sticky elements */
@@ -50,20 +55,20 @@
top: calc(3rem + env(safe-area-inset-top, 0px));
}
/* AI chat height on mobile: full viewport minus top bar and safe-area insets */
/* AI chat height on mobile: full viewport minus top bar, bottom nav (3.5rem), and safe-area insets */
.ai-chat-height {
height: calc(100dvh - 3rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
height: calc(100dvh - 3rem - 3.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
/* Live stream page height on mobile: full viewport minus top bar and safe-area insets */
/* Live stream page height on mobile: full viewport minus top bar, bottom nav, and safe-area insets */
.livestream-height {
height: calc(100dvh - 3rem - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 3rem - env(safe-area-inset-bottom, 0px));
height: calc(100dvh - 3rem - 3.5rem - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 3rem - 3.5rem - env(safe-area-inset-bottom, 0px));
}
/* Vine feed slide height: full viewport minus top bar, tab bar, and safe-area insets */
/* Vine feed slide height: full viewport minus top bar, tab bar, bottom nav, and safe-area insets */
.vine-slide-height {
height: calc(100dvh - env(safe-area-inset-top, 0px) - 3rem - 2.5rem - env(safe-area-inset-bottom, 0px));
height: calc(100dvh - env(safe-area-inset-top, 0px) - 3rem - 2.5rem - 3.5rem - env(safe-area-inset-bottom, 0px));
}
}