Repository navigation
Make the landing page work on a phone - #28
Merged
Merged
Conversation
The nav, the hero map and three sections below it were all broken at 390px. Nav: brand, three links and the button were one unwrappable flex row needing ~490px, so it overflowed the viewport by 18px and "Open Editor" broke onto two lines. The CTA becomes a sibling of the link row instead of a child, so under 600px the nav wraps to brand + button on top and the links as a second row. The link row itself gains flex-wrap, which is what was breaking the footer's six links too. Map: computeFitZoom returned 1 whenever it could not measure the canvas, which left an 824-unit-wide map at natural size inside a 356px frame, labels clipped. It now fits on whichever axis is measurable, and the mobile frame is a fixed height rather than a percentage that can measure zero. The fit also reads .diagram-viewport's real padding instead of hardcoding 48/32/56, so an embed can hand the map back the room the editor spends on its toolbar and chip rail. Legibility needed less content, not more scale: a three-level LR map fitted into 356px puts its labels at 6px whatever you do. Phones get a four-pillar version of the same story (code panel and map both, so the "this text makes that map" claim still holds) which fits complete and legible at 72%. Desktop is unchanged. Also on mobile: the roadmap rendered its labels at 5px (now 660px wide in a swipeable box), the npx install command was clipped mid-token, the source panel cut a line in half at max-height 280px, and 24px section gutters ate a word per line at 360px. The fit moves to useLayoutEffect so a big map no longer flashes at natural size before settling. Verified at 320, 360, 390, 430, 600, 601, 768, 900 and 1280px: no horizontal overflow at any of them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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 nav, the hero map and three sections below it were all broken at 390px. Reproduced in headless Chrome with touch emulation, then measured element geometry rather than eyeballing screenshots.
Nav
Brand, three links and the button were one unwrappable flex row needing ~490px, so at 390px it overflowed the viewport by 18px and "Open Editor" broke onto two lines. The CTA is now a sibling of the link row instead of a child, so under 600px the nav wraps: brand and button on top, links as a second row. The link row also gains
flex-wrap, which is what was breaking the footer's six links too.Hero map
computeFitZoomreturned1whenever it could not measure the canvas, which left the 824-unit-wide map at natural size inside a 356px frame with its labels clipped. That is the reported symptom. It now fits on whichever axis is measurable instead of falling back to natural size, and the mobile frame has a fixed height rather than a percentage that can measure zero.The fit also reads
.diagram-viewport's real padding instead of hardcoding 48/32/56, so a chrome-less embed can hand the map back the room the editor spends on its toolbar and chip rail.Legibility needed less content, not more scale: a three-level LR map fitted into 356px puts its labels at 6px however you slice it. Phones now get a four-pillar version of the same story (code panel and map both, so the "this text makes that map" claim still holds), which fits complete and legible at 72%. Desktop is unchanged.
Also broken on mobile, also fixed
npx skills add productscalexyz/mindmaplywas clipped mid-token.max-height:280px.The auto-fit moves to
useLayoutEffectso a big map no longer flashes at natural size on the way to its fitted scale.Verification
No horizontal overflow at 320, 360, 390, 430, 600, 601, 768, 900 or 1280px (
.landing-pagescrollWidth equals the viewport at each). Desktop layout confirmed unchanged. 280 tests pass, typecheck clean.Two follow-ups logged locally rather than fixed here: fitting to the diagram's ink instead of its padded viewBox would gain about a third more scale everywhere and would let the phone show the full three-level demo, and it would remove the need for the roadmap's sideways swipe.
🤖 Generated with Claude Code