thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home3: fix full-width regression — don't let the containment rule override .bento max-width

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 15:57:51 -04:00
parent 5657494988
commit 8dc22afbdc
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+4 -3
View File
@@ -317,9 +317,10 @@
display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.82fr); gap: 16px; 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; 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, /* 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. */ or the phone joys rail forces the whole page wider than the viewport. (NOT .bento — it
.bento, .rightcol, .pair-wrap, .joys-shelf, .joys { min-width: 0; max-width: 100%; } 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 /* 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 pair to the BOTTOM, with the extra space distributed BETWEEN them (FIX1). The cards
themselves keep their natural size and never stretch. */ themselves keep their natural size and never stretch. */