unom/punktfunk
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases 8 Wiki Activity

fix(web): pin the sidebar at viewport height

Browse Source 
Sticky h-dvh sidebar: long pages scroll the content, not the nav — the flex
stretch was pushing the language switcher below the fold; overflow-y-auto keeps
the nav usable on short viewports.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Enrico Bühler
2026-07-03 12:09:52 +00:00
parent 2c937855b3
commit 04f370999c
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/app-shell.tsx
+5 -2
View File
@@ -33,8 +33,11 @@ export function AppShell({ children }: { children: ReactNode }) {
useLocale(); useLocale();
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen">
{/* Desktop sidebar (≥ sm). */} {/* Desktop sidebar (≥ sm). Sticky at viewport height: the page (body) scrolls with
<aside className="hidden w-60 shrink-0 flex-col border-r bg-card/40 p-4 sm:flex"> long content, but the sidebar stays pinned — the explicit h-dvh stops the flex
stretch that would otherwise grow it (and push the language switcher) below the
fold. overflow-y-auto lets the nav itself scroll on very short viewports. */}
<aside className="sticky top-0 hidden h-dvh w-60 shrink-0 flex-col overflow-y-auto border-r bg-card/40 p-4 sm:flex">
<Link <Link
to="/" to="/"
aria-label="punktfunk" aria-label="punktfunk"