Fix mobile layout: header, featured card overflow, tap targets#1
Open
pd-builds wants to merge 11 commits into
Open
Fix mobile layout: header, featured card overflow, tap targets#1pd-builds wants to merge 11 commits into
pd-builds wants to merge 11 commits into
Conversation
- Featured resource card forced 402px width on 375px screens (flex min-width blowout via the 22rem image placeholder): cards can now shrink (min-width: 0) and the placeholder goes full-width on mobile. - Mobile header rebuilt as two balanced rows: logo + GitHub button on top, nav pills with real padding below (active pill no longer hugged its label). - Test mode tabs regain a 42px tap height and centered labels on touch layouts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…le CTAs - Header nav collapses into a hamburger panel on mobile: full-width rows, active page highlighted, GitHub button inside, Escape closes - Primitive feature cards become swipeable scroll-snap carousels with square numbered pager tiles below (pager hidden on desktop; active tile tracks scrolling without relying on requestAnimationFrame) - Test questions restack on mobile: number tile on top, question below, Yes/No aligned to the text's left edge, "?" right-aligned at 2rem to match the control height; name input goes full width - Resource-card CTAs show by default on small screens (no hover on touch) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- GitHub button becomes a full-width menu row: octocat icon, "Star us on GitHub" label, and the live star count as a chip - Open menu now sits over a dark scrim with the site's halftone texture fading out top-to-bottom; tapping the scrim closes the menu - Scrim lives as a header sibling: a fixed child would be trapped by the header's backdrop-filter containing block Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Mobile controls row: "?" on the left, Yes/No on the right - Question rows get 1.15rem vertical padding (was 0.7rem) so the separators breathe, on all widths Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Menu panel restructured: top padding, "Agentic Interface Framework" title, the three tabs, then the Star-us-on-GitHub row and a small "Built by the open source community at OpenUI.com" note - Scrim darkened to 78% ink; page scroll locks while the menu is open Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Cards escape the accordion indent via a full-bleed grid and fill the viewport minus a 1.1rem gutter; pager click/active math now uses the real card stride instead of the padded grid width. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <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.
Summary
min-width: 0) and the placeholder goes full-width on mobileVerification
Inspected all three pages plus the results modal at 375×812 in device emulation: no horizontal overflow anywhere, modal renders single-column with the stepper aligned. Already deployed to production via CLI for visual review.
🤖 Generated with Claude Code