Skip to content

Fix nav item overflow - remove h-full, smaller icons #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexgalkin94 merged 2 commits into from
Jan 17, 2026
Merged

Fix nav item overflow - remove h-full, smaller icons #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e38dc5f
Fix nav item overflow - remove h-full, smaller icons
claude Jan 17, 2026
1a71023
Rebuild navbar from scratch per Apple HIG
claude Jan 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default function AppShell({ children }: { children: React.ReactNode }) {

{/* Mobile Layout */}
<div className="lg:hidden">
<main className="min-h-screen pb-24 max-w-lg mx-auto">
{/* pb-[83px] = 49px tab bar + 34px safe area */}
<main className="min-h-screen pb-[calc(49px+env(safe-area-inset-bottom,34px))] max-w-lg mx-auto">
{children}
</main>
<BottomNav />
Expand Down
20 changes: 12 additions & 8 deletions src/components/BottomNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,27 @@ export default function BottomNav() {
);

return (
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950/90 backdrop-blur-lg border-t border-zinc-800 pb-[env(safe-area-inset-bottom)]">
<div className="flex justify-around items-center h-[49px] max-w-lg mx-auto px-2">
<nav
className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950/95 backdrop-blur-xl border-t border-zinc-800/50"
style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
>
{/* 49pt = 49px content height (Apple HIG standard) */}
<div className="flex justify-around items-stretch h-[49px] max-w-lg mx-auto">
{navItems.map(({ href, icon: Icon, label }) => {
const isActive = pathname === href;
return (
<Link
key={href}
href={href}
prefetch={true}
className={`flex flex-col items-center justify-center min-w-[56px] min-h-[56px] px-3 py-2 rounded-xl transition-colors active:scale-95 ${
isActive
? 'text-white bg-zinc-800/50'
: 'text-zinc-500 active:text-zinc-300'
className={`flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors active:opacity-70 ${
isActive ? 'text-white' : 'text-zinc-500'
}`}
>
<Icon size={24} />
<span className="text-[11px] mt-1 font-medium">{label}</span>
{/* 25pt icon size per Apple HIG */}
<Icon size={25} strokeWidth={isActive ? 2 : 1.5} />
{/* 10pt SF Medium per Apple HIG */}
<span className="text-[10px] font-medium leading-none">{label}</span>
</Link>
);
})}
Expand Down
Loading