brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: mobile nav scrolls horizontally without spilling to page width

Browse Source 
Logo and action buttons are shrink-0 anchors; nav links occupy the
remaining space with overflow-x:auto and a hidden scrollbar so they
scroll independently. body gets overflow-x:hidden to prevent the
whole page from drifting sideways on narrow screens.
This commit is contained in:
Davide Scaini
2026-04-10 22:05:42 +02:00
parent 3b8bc159c5
commit fc6c00c6eb
1 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/layouts/Base.astro
+22 -15
View File
@@ -138,8 +138,12 @@ try {
/* ── Base reset ─────────────────────────────────────────────────────── */ /* ── Base reset ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; } * { box-sizing: border-box; }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { margin: 0; } body { margin: 0; overflow-x: hidden; }
.maplibregl-canvas { outline: none; } .maplibregl-canvas { outline: none; }
/* Nav links scroll horizontally on narrow screens without a scrollbar */
.nav-links { scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }
</style> </style>
</head> </head>
<body <body
@@ -151,36 +155,39 @@ try {
class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur" class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur"
style="border-color: var(--border)" style="border-color: var(--border)"
> >
<div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-6"> <div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-3">
<a href={baseUrl} class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors"> <!-- Logo: always visible, never shrinks -->
<a href={baseUrl} class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors shrink-0">
Bincio<span class="text-[--accent]">Activity</span> Bincio<span class="text-[--accent]">Activity</span>
</a> </a>
{!isPublicPage && ( {!isPublicPage && (
<> <!-- Links: scroll horizontally on mobile, no visible scrollbar -->
<div class="nav-links flex items-center gap-5 overflow-x-auto flex-1 min-w-0">
<!-- Feed tab: only shown for multi-user (more than one shard) --> <!-- Feed tab: only shown for multi-user (more than one shard) -->
{!singleHandle && ( {!singleHandle && (
<a href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors">Feed</a> <a href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feed</a>
)} )}
<!-- Single-user: static handle link. Multi-user: populated by user-widget script. --> <!-- Single-user: static handle link. Multi-user: populated by user-widget script. -->
{singleHandle {singleHandle
? <a href={`${baseUrl}u/${singleHandle}/`} class="text-sm text-zinc-400 hover:text-white transition-colors">@{singleHandle}</a> ? <a href={`${baseUrl}u/${singleHandle}/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">@{singleHandle}</a>
: <a id="nav-me" href="#" style="display:none" class="text-sm text-[--accent] hover:text-white transition-colors"></a> : <a id="nav-me" href="#" style="display:none" class="text-sm text-[--accent] hover:text-white transition-colors shrink-0"></a>
} }
<!-- Per-user nav links — updated by user-widget script in multi-user mode --> <!-- Per-user nav links — updated by user-widget script in multi-user mode -->
<a id="nav-stats" href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/` : `${baseUrl}stats/`} data-user-path="stats/" class="text-sm text-zinc-400 hover:text-white transition-colors">Stats</a> <a id="nav-stats" href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/` : `${baseUrl}stats/`} data-user-path="stats/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Stats</a>
<a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors">Athlete</a> <a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Athlete</a>
{mobileApp && ( {mobileApp && (
<a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors">Record</a> <a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Record</a>
)} )}
{mobileApp && ( {mobileApp && (
<a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors">Convert</a> <a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Convert</a>
)} )}
<a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors">About</a> <a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
<a id="nav-feedback" href={`${baseUrl}feedback/`} style="display:none" class="text-sm text-zinc-400 hover:text-white transition-colors">Feedback</a> <a id="nav-feedback" href={`${baseUrl}feedback/`} style="display:none" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feedback</a>
</> </div>
)} )}
<div class="ml-auto flex items-center gap-1"> <!-- Actions: always visible, never shrinks -->
<div class="ml-auto shrink-0 flex items-center gap-1">
{!isPublicPage && ( {!isPublicPage && (
<> <>
<!-- Logout button — hidden until logged in --> <!-- Logout button — hidden until logged in -->