fix: project page renders on a phone - #49
Merged
Merged
Conversation
Two things broke below about 372px. The card grid asked for a 22rem minimum track, which is wider than a phone, so the floor could not shrink and the whole page scrolled sideways with the body text cut off at the right edge: 52px of overflow at 320px, 13px at 360px. And the architecture diagram is 860 units wide at width:100%, so it scaled to roughly a third and put its labels near 4px. The grid minimums become min(22rem,100%), which lets the track collapse to the container instead of setting a floor under it. Below 48rem a portrait version of the same diagram is swapped in, capped in width so its labels stay near their true size rather than ballooning on a tablet, and hidden with display:none so only one title reaches the accessibility tree. The landscape diagram is untouched, so the desktop page is unchanged. Terminal transcripts drop a step on narrow screens. They still scroll sideways inside their own box, which is what a fixed-width transcript does, but the shorter lines now land whole. Verified in headless Chrome with device emulation at 320, 360, 375, 390, 414, 430, 768, 1024, 1280 and 1440: no horizontal overflow at any width, and no text rendering under 11px once the viewBox scale is accounted for. The page stays free of JavaScript.
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
1 participant
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.
The project page at
gopherkind.com/project/scrolled sideways on a phone with body text cut off at the right edge, and its architecture diagram was too small to read.What was wrong
The card grid overflowed below about 372px.
.grid-2usedminmax(22rem,1fr). A 352px floor cannot shrink below a phone, so the track overflowed the viewport rather than collapsing: 52px of overflow at 320px, 13px at 360px. The whole page scrolled sideways as a result, not just the grid.The diagram was illegible on every phone width. It is an 860-unit SVG at
width:100%, so on a 390px screen it scales to about 0.4 and its 12px and 10.5px labels render near 4px.What changed
minmax(min(...,100%),1fr).display:nonekeeps the hidden one out of the accessibility tree, so only one<title>is announced, and the two use distinct ids.The landscape diagram is untouched and the desktop page is unchanged.
Verification
Headless Chrome with device emulation at 320, 360, 375, 390, 414, 430, 768, 1024, 1280 and 1440px: zero horizontal overflow at every width, and no text rendering below 11px once the SVG viewBox scale is accounted for. Desktop rendering compared by screenshot before and after. The page stays free of JavaScript.
The bridge itself was audited at the same widths and needed no change: its chrome reflows, and its fixed-width gopher content scrolls inside its own
pre, which is the only correct answer when a profile banner is SGR block art that must not reflow.