From 420150a5327cb2da5a6d1988af52b9163efb15aa Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 20:54:10 -0400 Subject: [PATCH] /art mobile: fix horizontal overflow (controls width:100% + margins) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mobile controls card kept its base width:100% and also got side margins, so 100%+margins overflowed the viewport → sideways scroll. Set width:auto (flex stretch fills minus margins) + box-sizing:border-box, and add overflow-x:clip on .room as a seatbelt. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/art/+page.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte index da48034..a13369b 100644 --- a/frontend/src/routes/art/+page.svelte +++ b/frontend/src/routes/art/+page.svelte @@ -240,6 +240,7 @@ font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; + overflow-x: clip; /* seatbelt: nothing can scroll the page sideways */ } /* /art runs wider than the hub's 1180 column — the artwork is the point, and the @@ -313,7 +314,8 @@ .head { order: 1; padding: clamp(22px, 5vw, 28px) clamp(18px, 5vw, 22px) 14px; } .art-stage { order: 2; background: var(--art-band); padding: 22px 18px; box-sizing: border-box; } .body { order: 3; padding: 20px clamp(18px, 5vw, 22px) 4px; } - .controls { order: 4; max-width: none; margin: 16px clamp(14px, 4vw, 18px) clamp(20px, 5vw, 24px); + .controls { order: 4; width: auto; max-width: none; box-sizing: border-box; + margin: 16px clamp(14px, 4vw, 18px) clamp(20px, 5vw, 24px); background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: 18px 16px; } .meta-cols { gap: 28px; } .cta { align-self: stretch; text-align: center; }