Twelve rulings in a 460px sheet in the middle of an 844px window: 754px of
content in a 334px scrollport, 111 of it spent on a title and a caveat that
stand still, 384px of window width unused either side. Four of the twelve
names on screen, and the dealer is looking one up with an argument going on
at the table.
Material's rule for a bottom sheet in landscape is to stop being one, and
this tool already does exactly that under this query for the action bar. So
the sheet takes the window and the width pays for the height: the twelve go
into two columns of six, all of them on screen at 844x390 with nothing to
scroll at all, and the title, the caveat and Done share one line instead of
standing on three.
Two wrappers in the markup rather than one grid of twelve, because a grid
pairs its children into shared rows: opening the third ruling on the left
would push the ninth down the right-hand side to keep the row square. Two
flows means a column only ever moves itself — measured, opening one leaves
the other six names exactly where they were. Everywhere but landscape the
wrappers are `display: contents` and the twelve are the single column they
have always been.
And the same sheet upright: the header is stuck to the top of its own
scrollport now, the way the seat menu's has been. Measured before, at the
bottom of that scroll Done was 221px above the sheet's top edge on a 360x640
phone, and 262 on a 390x844 one with a ruling open — which is the only
reason anybody is in here. A dealer who has read the answer had to scroll
back past it to leave.
The layout sweep's scroll-into-view guard learns the new box, or it finds a
sheet whose scrollHeight equals its clientHeight and decides nothing is out
of view.
1324 tests pass. The sweep is clean across 428 audits; contrast unchanged.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
The sheet a dealer opens mid-argument held twelve rulings with all their prose
showing — 2,480px of it on a 390px phone, of which 1,754 was below the fold —
and a row of twelve chips across the top to jump between them.
The chips were an index of the twelve headings printed directly above the same
twelve headings. The same list twice: 172px of navigation before the first
word, and the dealer who tapped one landed in the middle of a scroll with
eleven rulings they hadn't asked for still wrapped around them.
The headings are the index now. NN/g's rule for this shape — a longer list of
independent topics somebody opens one of — is an accordion, shut by default,
and it suits these unusually well because half of them answer the question
without being opened at all. "A short all-in doesn't reopen the betting" is the
ruling, not the topic. So is "Chips nobody called come back", and "A straddle
is a blind raise", and "A raise has to be a full raise".
Measured after: 29px below the fold on a 390px phone with all twelve rows on
screen at once, 51px on a desktop, and 244px with the longest of them open.
Not exclusive — no `name` attribute. Closing one because another opened moves
everything under the finger that is reaching, which is the disorientation the
accordion is here to remove rather than add. And the sheet shuts what it finds
open when it is opened again: <details> keeps its state, so without that a
dealer who read the odd-chip rule an hour ago finds it still hanging open under
the one they came back for.
Two things that came with it:
The gold arrives when a ruling is opened and not before. Twelve gold headings
in a column is the accent doing the job of body text, which leaves it nothing
to say when one of them is the one being read. The sidebar's eight panel names
are --text for the same reason; this is the same component doing the same job.
Five of the twelve are two paragraphs, and they ran into each other — the
sections were spaced from one another but nothing separated the halves of one
ruling. It never showed while there was a gold heading every few lines to break
the column up.
1095 tests pass; the 418-audit sweep is clean.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheapsandClaude Opus 5