fix(playground-mini-lynx): give the page element the screen's height, so the app scrolls - #19
Merged
Merged
Conversation
… so the app scrolls On a device the page element IS the screen — the viewport sizes it, and a tree taller than it scrolls inside a scroll-view. In a browser it is an ordinary element that sizes to its content, and the reset's own `flex-shrink: 0` kept it from being squeezed back down: the page grew past the bottom of `#app`, which clips, so every scroll-view inside it was unbounded and nothing scrolled anywhere. The tab bar sat below the fold with no way to reach it. Hand the height back in the reset, where the rest of the browser-vs-engine corrections live. Both declarations are needed for the two shapes a host box takes: `height` for a block container, the flex pair for a flex one.
`playground-mini` was a desktop page with a breakpoint bolted on: nine multi-word nav labels wrapped into three lines at the top of every page, the readouts wrapped mid-column and lost the alignment that was the point of them, and every control was under the size a thumb can hit. It is now written small-screen first — the sidebar is a drawer behind a top bar below 760px and the same `<aside>` becomes the sticky sidebar above it, with one signal driving one class and no second markup path. Readouts scroll rather than wrap, fields take a 16px font so iOS stops zooming the page on focus, hover styles are behind `hover: hover` so they do not stick after a tap, and the gutters clear a notch in landscape. Changing section closes the drawer and returns to the top — the section, not the path, so the `/router/:owner/:repo` demo can still navigate within itself. `playground-mini-lynx` was already phone-shaped, but a row that did not fit ran off the side of the screen and Lynx clipped it, taking the tap targets with it. Lynx has no `@media` to fall back on, so `<Row>` wraps by default now and chips, actions and cards shrink instead of overflowing. The frame also stops above the home indicator, which `viewport-fit=cover` had it running under.
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.
On a device the page element IS the screen — the viewport sizes it, and a tree
taller than it scrolls inside a scroll-view. In a browser it is an ordinary
element that sizes to its content, and the reset's own
flex-shrink: 0kept itfrom being squeezed back down: the page grew past the bottom of
#app, whichclips, so every scroll-view inside it was unbounded and nothing scrolled
anywhere. The tab bar sat below the fold with no way to reach it.
Hand the height back in the reset, where the rest of the browser-vs-engine
corrections live. Both declarations are needed for the two shapes a host box
takes:
heightfor a block container, the flex pair for a flex one.📦 Bundle-size delta vs main (
55e928b→428c6db)Gzipped bytes of each bundled entry (esbuild, minified, browser/es2022, optional peer deps external). Bundling is deterministic, so unlike a timed benchmark these numbers carry no noise and every Δ is exact. ⚪ within ±0.5% · 🟢 smaller · 🔴 larger. Each package's
core (.)must stay flat as subpath features land — that is the whole charter, andsrc/core-size-budget.test.tsholds the absolute ceiling.