From 62b9abd31b4a13db86a9cae5e7e365f5b7287fd7 Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 20:39:20 +0000
Subject: [PATCH] Fix the register section overflowing the viewport on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On phones the About copy and the StreamYard registration form were cut off on
the right. The register grid's mobile column was `1fr` (i.e. `minmax(auto, 1fr)`),
whose `auto` minimum can't shrink below its content's intrinsic width. The
embedded StreamYard form has a large min-content width — and iOS Safari sizes
iframes to their content regardless of CSS — so the track was forced wider than
the viewport, dragging the About column off-screen with it.

- Collapse the mobile register grid to `minmax(0, 1fr)` and give both grid items
  `min-width: 0`, so the columns shrink to the viewport instead of to the
  iframe's content width.
- Add `overflow-x: clip` to `.id-page` as a safety net so no wide child can ever
  push the page past the viewport. `clip` (not `hidden`) keeps the sticky event
  sub-nav working.
- Trim the form card's padding on small screens so the embed has more room.

Verified with a stress test injecting a 900px-wide iframe: the page scrollWidth
stays equal to the viewport at 360/390/768/1024/1440. build, lint and
validate-posts all pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016QU1xKJitT9UNpCfjXjDxt
Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 src/styles/inference-day.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index b3698e1..5c041cc 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -28,6 +28,10 @@
   background: var(--id-midnight);
   color: #fff;
   font-family: var(--font-body);
+  /* Safety net: never let a wide child (e.g. the StreamYard iframe, which iOS
+     Safari sizes to its content) push the page past the viewport. `clip` keeps
+     the sticky sub-nav working, which `hidden` would break. */
+  overflow-x: clip;
 }
 
 /* The page sets its own background; pin html and body to the same midnight so
@@ -212,6 +216,10 @@ body:has(.id-page) { background: #001C2E; }
   gap: 96px;
   align-items: start;
 }
+/* Let both columns shrink below their content's intrinsic width. Without this,
+   the StreamYard iframe's large min-content width (on iOS especially) forces the
+   track wider than the viewport and drags the About column off-screen with it. */
+.id-register-grid > * { min-width: 0; }
 .id-about-h2 {
   font-family: var(--font-display);
   font-weight: 500;
@@ -504,7 +512,7 @@ body:has(.id-page) { background: #001C2E; }
   .id-panel-grid { grid-template-columns: repeat(3, 1fr); }
 }
 @media (max-width: 1024px) {
-  .id-register-grid { grid-template-columns: 1fr; gap: 48px; }
+  .id-register-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
   .id-form-card { order: 2; }
   .id-hero-inner { max-width: none; }
 }
@@ -514,6 +522,7 @@ body:has(.id-page) { background: #001C2E; }
 }
 @media (max-width: 640px) {
   .id-page { --id-gutter: 20px; }
+  .id-form-card { padding: 24px; }
   .id-panel-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
   .id-panel-card .id-photo { width: 100%; height: auto; }
   .id-form-grid { grid-template-columns: 1fr; }