Screens that already fit no longer scroll or rubber-band
- 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.
This commit is contained in:
parent
080306f111
commit
7ab04e9f62
5 changed files with 8 additions and 7 deletions
|
|
@ -118,7 +118,7 @@ function GateScreen() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="gate-bg relative min-h-dvh w-full overflow-hidden">
|
||||
<div className="gate-bg fixed inset-0 overflow-hidden overscroll-none">
|
||||
{/* corner controls: theme + help ---------------------------------- */}
|
||||
<div
|
||||
className="fixed z-20 flex items-center gap-2"
|
||||
|
|
@ -153,7 +153,7 @@ function GateScreen() {
|
|||
</div>
|
||||
|
||||
{/* card ----------------------------------------------------------- */}
|
||||
<div className="relative z-10 flex min-h-[100dvh] items-center justify-center px-5 py-10">
|
||||
<div className="relative z-10 flex h-full items-center justify-center overflow-y-auto overscroll-contain px-5 py-10">
|
||||
<motion.div
|
||||
initial={reduceMotion ? false : { opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export function EmptyState({
|
|||
action?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="animate-rise flex flex-col items-center px-6 py-16 text-center sm:py-24">
|
||||
<div className="animate-rise flex flex-col items-center px-6 py-6 text-center sm:py-24">
|
||||
<span
|
||||
className="mb-4 grid size-12 place-items-center rounded-2xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-subtle)]"
|
||||
aria-hidden
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue