From 3932b172564b0866248cdc5ff37fb93d70854774 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Tue, 12 May 2026 17:16:12 -0400 Subject: [PATCH] =?UTF-8?q?aperture=20architecture:=20lift=20the=20page-lo?= =?UTF-8?q?cking=20foundation=20(html/body/.container=20overflow:hidden=20?= =?UTF-8?q?+=20flex-column=20+=20min-height:0;=20.row=20flex-shrink:0)=20f?= =?UTF-8?q?rom=205=20per-page=20SCSS=20files=20into=20=5Fbase.scss=20?= =?UTF-8?q?=E2=80=94=20was=20opt-in=20per=20page=20via=20`body.page-billbo?= =?UTF-8?q?ard`=20/=20`page-dashboard`=20/=20`page-gameboard`=20/=20`page-?= =?UTF-8?q?sky`=20/=20`page-wallet`=20etc.,=20with=205=20near-identical=20?= =?UTF-8?q?`html:has(body.page-X)=20{=20overflow:=20hidden=20}`=20+=20`bod?= =?UTF-8?q?y.page-X=20{=20=E2=80=A6=20}`=20blocks=20duplicating=20the=20sa?= =?UTF-8?q?me=20rules;=20any=20page=20that=20forgot=20to=20set=20`page=5Fc?= =?UTF-8?q?lass`=20in=20its=20view=20context=20(e.g.=20`epic.tarot=5Fdeck`?= =?UTF-8?q?=20=E2=80=94=20never=20set)=20rendered=20without=20the=20apertu?= =?UTF-8?q?re,=20letting=20applet=20borders=20+=20titles=20clip=20past=20t?= =?UTF-8?q?he=20fixed=20navbar/footer=20sidebars=20at=20narrower=20viewpor?= =?UTF-8?q?ts;=20foundation=20now=20universal,=20page-specific=20overrides?= =?UTF-8?q?=20stay=20scoped=20=E2=80=94=20gameboard=20keeps=20`.container?= =?UTF-8?q?=20{=20overflow:=20clip=20}`=20(Firefox=20seat-tooltip=20scroll?= =?UTF-8?q?-anchoring=20quirk)=20+=20billboard/dashboard/gameboard=20keep?= =?UTF-8?q?=20`.row=20{=20margin-bottom:=20-1rem=20}`=20(h2-row=20tighteni?= =?UTF-8?q?ng);=20page=5Fclass=20context=20vars=20+=20body=20class=20hooks?= =?UTF-8?q?=20preserved=20(FTs=20at=20test=5Fbud=5Fbtn.py:370=20/=20:379?= =?UTF-8?q?=20still=20assert=20on=20them);=20regression=20gate:=2060=20lay?= =?UTF-8?q?out-sensitive=20FTs=20(billboard,=20my=5Fbuds,=20bud=5Fbtn,=20a?= =?UTF-8?q?pplet=5Fmy=5Fposts,=20dashboard,=20wallet,=20gameboard,=20layou?= =?UTF-8?q?t=5Fand=5Fstyling,=20jasmine)=20+=2043=20room=20FTs=20(gatekeep?= =?UTF-8?q?er=5Fbud=5Fbtn,=20room=5Fgatekeeper,=20room=5Fsky=5Fselect,=20s?= =?UTF-8?q?haring)=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_base.scss | 20 ++++++++++++++++++++ src/static_src/scss/_billboard.scss | 25 ++++++------------------- src/static_src/scss/_dashboard.scss | 23 ++++------------------- src/static_src/scss/_gameboard.scss | 17 ++++++----------- src/static_src/scss/_sky.scss | 25 ++++--------------------- src/static_src/scss/_wallet-tokens.scss | 21 ++------------------- 6 files changed, 42 insertions(+), 89 deletions(-) diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index bfd9416..f51a7eb 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -7,6 +7,13 @@ // 2.4vmin hits 16px (browser default) at vmin=667 (iPhone SE landscape). html { font-size: clamp(14px, 2.4vmin, 22px); + // Aperture foundation — locks the document viewport so content lives + // between/behind the fixed navbar + footer sidebars instead of leaking + // into a page-level scroll. Was opt-in per-page via body.page-X classes + // (duplicated 5× across SCSS files); now universal. Pages that need a + // narrower override (e.g. body.page-gameboard .container { overflow: + // clip; }) live in their per-page SCSS. + overflow: hidden; } // Layout custom properties — single source of truth for the landscape @@ -25,6 +32,7 @@ body { color: rgba(var(--secUser), 1); font-family: Georgia, serif; height: 100vh; + overflow: hidden; a { text-decoration: none; @@ -43,6 +51,14 @@ body { margin: 0 auto; // padding: 0 1rem; flex: 1; + // Aperture container — flex-column so navbar + h2 row + page content + // stack vertically, min-height: 0 + overflow: hidden contain the + // content within the aperture so applet borders / titles can't + // leak past the navbar / footer sidebars at narrow viewports. + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; .navbar { padding: 0.75rem 0; @@ -183,6 +199,10 @@ body { .row { padding: 2rem 0; + // Aperture: the h2-row mustn't shrink when the page-content + // child fills the remaining vertical space. Universal — was + // duplicated in every body.page-X { .row { flex-shrink: 0 } }. + flex-shrink: 0; .col-md-12 { width: 100%; diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index a4ef689..6fcbe49 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -24,6 +24,12 @@ } // ── Shared aperture fill for both billboard pages ────────────────────────── +// +// Aperture foundation (html/body/.container overflow + flex-column + +// .row flex-shrink: 0) now lives universally in _base.scss. Only the +// page-specific `.row { margin-bottom: -1rem }` pull (tightening the +// h2 row against subsequent applet content) stays here, since wallet +// + sky pages deliberately don't carry that pull. %billboard-page-base { flex: 1; @@ -33,31 +39,12 @@ position: relative; } -html:has(body.page-billboard), -html:has(body.page-billscroll), -html:has(body.page-billpost), -html:has(body.page-billbuds), -html:has(body.page-billposts) { - overflow: hidden; -} - body.page-billboard, body.page-billscroll, body.page-billpost, body.page-billbuds, body.page-billposts { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - .row { - flex-shrink: 0; margin-bottom: -1rem; } } diff --git a/src/static_src/scss/_dashboard.scss b/src/static_src/scss/_dashboard.scss index 1402f74..db70db3 100644 --- a/src/static_src/scss/_dashboard.scss +++ b/src/static_src/scss/_dashboard.scss @@ -1,23 +1,8 @@ -html:has(body.page-dashboard) { - overflow: hidden; -} +// Aperture foundation now lives in _base.scss; only the dashboard-specific +// `.row { margin-bottom: -1rem }` pull stays here. -body.page-dashboard { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - - } - - .row { - flex-shrink: 0; - margin-bottom: -1rem; - } +body.page-dashboard .row { + margin-bottom: -1rem; } #id_dash_content { diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index b3b5609..3085f69 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -1,21 +1,16 @@ -html:has(body.page-gameboard) { - overflow: hidden; -} +// Aperture foundation (html/body/.container overflow + flex-column) lives +// universally in _base.scss. Gameboard's only divergence: `overflow: clip` +// on .container instead of `hidden` — `clip` prevents the seat tooltip +// scroll-anchoring quirk Firefox triggers under overflow:hidden. The +// `.row { margin-bottom: -1rem }` pull mirrors the billboard/dashboard +// h2-row tightening. body.page-gameboard { - overflow: hidden; - .container { overflow: clip; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } .row { - flex-shrink: 0; margin-bottom: -1rem; } } diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index aee10d1..0044220 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -935,27 +935,10 @@ body[class*="-light"] #id_sky_tooltip_2 { } } -// ── Sky full page (aperture + column layout) ────────────────────────────────── - -html:has(body.page-sky) { - overflow: hidden; -} - -body.page-sky { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - - .row { - flex-shrink: 0; - } -} +// ── Sky full page (column layout) ───────────────────────────────────────── +// +// Aperture foundation lives universally in _base.scss; nothing sky-specific +// here besides the .sky-page block below. // Sky page fills the aperture; its content can scroll past the bottom edge. // overflow-x: hidden clips any horizontal overflow that would otherwise create diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index 6252d11..085fce0 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/src/static_src/scss/_wallet-tokens.scss @@ -22,25 +22,8 @@ > i { opacity: 0.4; } } -html:has(body.page-wallet) { - overflow: hidden; -} - -body.page-wallet { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - - .row { - flex-shrink: 0; - } -} +// Aperture foundation lives universally in _base.scss; nothing +// wallet-specific to override. .wallet-page { position: relative;