Add mobile burger menu and fix playground scrolling on phones - #14
Merged
Conversation
The topbar's links were simply hidden below 680px, leaving no way to reach the playground or docs from a phone. Extract the copy-pasted header into a shared TopBar component with a burger button that drops the full link list down as a panel; the active page keeps its aria-current highlight. On mobile the playground's Monaco editor was a fixed 320px box that scrolled internally, so touch swipes over the code never scrolled the page, and the default Split view collapsed to Code-only, hiding the rendered output entirely after Run. Now narrow screens stack Split's panes into one scrolling column, the editor grows to fit its content (no nested scroll trap), Monaco stops swallowing wheel events at its scroll limits, and the view tabs go icon-only so the example selector stays readable next to Run. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BV8uscy25DJ1ZYJv8a6yKu
✅ Deploy Preview for noise-lang ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
On phones the playground now behaves like an app screen: exactly one pane at a time (Code or Render — Split resolves to Code again), sized to fill the viewport below the topbar. Monaco scrolls internally as it does on desktop, the Render paper scrolls within its own pane, and the play page hides the embed prose and footer under 880px so there is nothing after the playground to scroll to. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BV8uscy25DJ1ZYJv8a6yKu
On phones the engine readout keeps only time and backend (the samples chip and its separator hide), so the header stops wrapping into a pile of lines. The details hover panel used to hang off the left edge of the screen — its absolute anchor was the readout itself; on narrow screens it now anchors to the header row, spanning its width and scrolling internally when the engine notes run long. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BV8uscy25DJ1ZYJv8a6yKu
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.
The topbar's links were simply hidden below 680px, leaving no way to
reach the playground or docs from a phone. Extract the copy-pasted
header into a shared TopBar component with a burger button that drops
the full link list down as a panel; the active page keeps its
aria-current highlight.
On mobile the playground's Monaco editor was a fixed 320px box that
scrolled internally, so touch swipes over the code never scrolled the
page, and the default Split view collapsed to Code-only, hiding the
rendered output entirely after Run. Now narrow screens stack Split's
panes into one scrolling column, the editor grows to fit its content
(no nested scroll trap), Monaco stops swallowing wheel events at its
scroll limits, and the view tabs go icon-only so the example selector
stays readable next to Run.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01BV8uscy25DJ1ZYJv8a6yKu