From 8dc22afbdc35a3422110d7d1e438391aa2eee6f1 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 15:57:51 -0400 Subject: [PATCH] =?UTF-8?q?home3:=20fix=20full-width=20regression=20?= =?UTF-8?q?=E2=80=94=20don't=20let=20the=20containment=20rule=20override?= =?UTF-8?q?=20.bento=20max-width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The min-width:0/max-width:100% containment rule included .bento, and being a later rule of equal specificity it overrode .bento's own max-width:1180px → grid went edge-to-edge. Scope the rule to the grid items + flex chain (.news/.rightcol/ .pair-wrap/.joys-shelf/.joys) instead; .bento keeps its 1180px cap. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/home3/+page.svelte | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 9a93fc0..feab89a 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -317,9 +317,10 @@ display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.82fr); gap: 16px; font-family: 'Work Sans', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; } - /* Containment: every link in the chain must be allowed to shrink below its content, - or the phone joys rail forces the whole page wider than the viewport. */ - .bento, .rightcol, .pair-wrap, .joys-shelf, .joys { min-width: 0; max-width: 100%; } + /* Containment: the grid items + flex chain must be allowed to shrink below their content, + or the phone joys rail forces the whole page wider than the viewport. (NOT .bento — it + keeps its own max-width:1180px; listing it here would override that and go full-width.) */ + .news, .rightcol, .pair-wrap, .joys-shelf, .joys { min-width: 0; max-width: 100%; } /* right column matches the News height; Art stays pinned to the TOP and the Play/Moment pair to the BOTTOM, with the extra space distributed BETWEEN them (FIX1). The cards themselves keep their natural size and never stretch. */