Repository navigation
Fix the Inference Day register section overflowing on mobile - #43
Merged
bassam merged 1 commit intoOct 20, 2026
Merged
Conversation
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>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What and why
On phones, the "About the event" copy and the StreamYard registration form on
/inference-daywere cut off on the right edge (reported by Annie after the merge of #42).Root cause: the register section's mobile grid column was
1fr(i.e.minmax(auto, 1fr)), whoseautominimum 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 width — so the grid track was forced wider than the viewport, dragging the About column off-screen with it. That's why both the form and the text were clipped.The fix (CSS only, scoped to
.id-page):minmax(0, 1fr)and give both grid itemsmin-width: 0, so the columns shrink to the viewport instead of to the iframe's content width.overflow-x: clipto.id-pageas a safety net so no wide child can push the page past the viewport.clip(nothidden) is used so the sticky event sub-nav keeps working.Verified with a stress test that injects a 900px-wide iframe: the page
scrollWidthstays equal to the viewport at 360 / 390 / 768 / 1024 / 1440. Desktop is unchanged.Checklist
npm run lintandnpm run buildlocally — both pass (lint clean; the remaining<img>warnings are pre-existing).npm run validate-posts— passes (no blog content changed).git commit -s.Generated by Claude Code