Fuller desktop layout: wider containers, bigger cards, responsive grids - #10
Merged
Merged
Conversation
Every page sat in a 700px column at laptop widths, leaving most of the screen empty. Content containers widen to 1100px (settings 900, session screens 900 since questions are a reading surface), cards get larger padding and type, and lists of peer items become responsive grids that collapse to one column on phones: today's sessions and achievement badges on the dashboard, sessions within a day on the plan, quick actions and learning path steps on Learn, badge cards on achievements, deck and guide cards, and settings sections as label and control rows. The plan form widens to 720 with paired fields, the activity heatmap stretches to the container, the runner's question text and controls scale up, preflight stats and end screen stats sit four across on desktop, and the chat thread fills a 900px column with a taller composer. Grids use auto fit so a pair of cards splits the full width instead of leaving an empty track. All README screenshots and the answer loop GIF are recaptured at the new width at double resolution for crisp rendering.
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
2 participants
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.
Addresses the owner's feedback that the UI looked empty: every page rendered in a 700px centered column at laptop widths, so most of a 1440px screen was dark margin.
The new layout standard
auto-fit, minmax(320px, 1fr)) that collapse to one column on phones — a pair of cards splits the full width instead of leaving an empty trackWhere it lands
Every page was visually verified live at 1440x900 and 390x844 with zero horizontal overflow. All README screenshots and the answer-loop GIF are recaptured at the new width at 2x resolution.
Verification
tsc --noEmitclean, 646 unit tests passedGenerated by Claude Code