Make the site usable on a phone - #4
Merged
Merged
Conversation
The panel is 245px of fixed-position column at the top right, which on a phone covers the thing it is meant to control. On a touch device it is now a bottom sheet: full width, collapsed to its title bar on load, opening to at most 62% of the screen with its own scroll, and with rows tall enough to hit with a thumb. The rest of the interface moves out of its way. The readout and a new interface toggle sit at the top, clear of both the sheet and any notch (env(safe-area-inset-*) throughout, with viewport-fit=cover so the render still reaches the edges). That toggle exists because the H shortcut is meaningless without a keyboard, and it is the one control that survives cinematic mode: with no keyboard it is the only way back. It shows the action rather than the state, an eye while the interface is hidden and a struck-through eye while it is showing, as inline SVG rather than an emoji that renders differently on every platform. The panel title and the toast say "tap" instead of "press H" when that is what the device actually offers. Render budget: a phone GPU is perhaps a tenth of a desktop card and reports a device pixel ratio of 3, so an unthrottled raymarch draws nine times the pixels on a tenth of the hardware. Mobile starts at the low preset, caps the pixel ratio at 1.25, and bakes a 512px sky rather than 1024, which also removes a visible stall at boot. The existing auto-degrade still handles anything slower. `touch-action: none` on the page and canvas, so a drag is a camera move rather than the browser scrolling or pinch-zooming first. Mobile is decided once at boot from a coarse pointer *and* a small screen: a touchscreen laptop keeps the desktop layout, and a narrow desktop window keeps its keyboard shortcuts. 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 panel covered the render on a phone. This turns it into a bottom sheet
and gives the touch layout its own budget.
Layout
load, opening to at most 62vh with its own scroll and thumb-sized rows.
of any notch.
env(safe-area-inset-*)throughout,viewport-fit=coversothe render still reaches the edges.
touch-action: noneon page and canvas, so a drag is a camera move ratherthan a page scroll or pinch-zoom.
The toggle button
Hmeans nothing without a keyboard, so the shortcut needed a button. It isthe one control that survives cinematic mode, because with no keyboard it is
the only way back. It shows the action rather than the state: an eye while
the interface is hidden, a struck-through eye while it is showing. Inline
SVG, not an emoji. The title bar and toast say "tap" rather than "press H"
when that is what the device offers.
Render budget
A phone GPU is roughly a tenth of a desktop card and reports a pixel ratio of
3, so an unthrottled raymarch draws nine times the pixels on a tenth of the
hardware. Mobile starts at
low, caps the pixel ratio at 1.25, and bakes a512px sky instead of 1024 (which also removes a visible stall at boot).
Detection is a coarse pointer and a small screen, decided once at boot.
A touchscreen laptop keeps the desktop layout; a narrow desktop window keeps
its keyboard shortcuts.
Verified under iPhone emulation against the production build: the panel
covers 5% of the screen on load instead of swallowing it, the toggle is
visible and both icons swap correctly, presets fire from a real touchscreen
tap (confirmed a star placed and stretching), cinematic mode round-trips, and
the title text stays honest in both states.
🤖 Generated with Claude Code