Martin Dvorak
7ab04e9f62
- API-key gate is now a fixed, out-of-flow overlay (inset-0, overflow hidden, overscroll-none) with its own internal scroller, so the document has no scrollable height on phones. It can't be panned or bounced. - Home/create mains are flex columns with min-h-dvh and a flex-1 content area, and the empty state's mobile padding was trimmed, so a short/empty library is exactly viewport height instead of overflowing by ~76px. Long pages (the create form, decks) still scroll normally. - html/body get overscroll-behavior: none to stop pull-to-refresh and rubber-banding on fitting screens. Verified with a scroll probe (gate and empty library: scrollHeight == viewport; create still scrolls) plus zoom 6/6, install sheet 64/64, pwa 16/16, final-ux 12/12, retry 14/14, security 8/8, contrast 20/20.
24 lines
789 B
TypeScript
24 lines
789 B
TypeScript
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
|
import { AppHeader } from "@/components/AppHeader";
|
|
import { LibraryScreen } from "@/components/LibraryScreen";
|
|
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
|
|
import { TabBar } from "@/components/TabBar";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ApiKeyGate>
|
|
<div className="flex min-h-dvh bg-[var(--page)]">
|
|
<Sidebar />
|
|
<SidebarOffset />
|
|
<MobileSidebar />
|
|
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
|
<AppHeader />
|
|
<div className="mx-auto w-full max-w-6xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16">
|
|
<LibraryScreen />
|
|
</div>
|
|
<TabBar />
|
|
</main>
|
|
</div>
|
|
</ApiKeyGate>
|
|
);
|
|
}
|