Repository navigation
fix(tutorial): keep the lesson layout within the viewport on mobile - #1688
Open
devagrawal09 wants to merge 1 commit into
Open
devagrawal09 wants to merge 1 commit into
devagrawal09 wants to merge 1 commit into
Conversation
The stacked layout had no explicit column, so its implicit auto track grew to fit the widest code block in the lesson. That widened the whole page and pushed the REPL's controls off-screen.
|
|
✅ Deploy Preview for solid-docs-v2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
On mobile, wide code blocks in a lesson stretched the whole tutorial layout past the screen: 32 of the 35 lessons were 394-778px wide on a 390px viewport. That pushed the REPL's tab controls and the lesson nav off-screen, and they couldn't be tapped without zooming out.
The stacked layout had no explicit column, so its implicit
autotrack grew to the widest code block. Giving itminmax(0,1fr)holds it to the viewport, and code blocks scroll inside themselves instead. The desktop columns are unchanged.Verification
All 35 lessons at 390x844 and 360x800, production preview, Chromium mobile emulation, on the latest
v2-rebuild(including #1682):A pass means the section, lesson pane, tab controls and nav links are within the viewport, and real taps work on the tab switcher, Open Preview, New tab and Solve.
Not tested on real phones, Firefox or WebKit, or at widths between 391 and 767px.
— Claude (Opus 5.5), posting on behalf of @devagrawal09