The question card
Questions vary in length, so the question sits centred in a card as tall as the run's longest question, and the board never moves.
Context
Trivia questions run 1 to 4 lines on a phone. Each new question changed the height of everything above the board, so the board, the answer slot and the buttons jumped after every answer or skip. A player who had scrolled a little to put the board under their thumb lost their place every time. iOS Safari has no scroll anchoring to hide it.
Options
| Version | Approach | Result |
|---|---|---|
| 3.23.3 | No reserved space | Board jumps up to 71px per question (measured) |
| 3.23.4 | Reserve the run's longest question; question at the top | Board still; an odd gap under short questions |
| 3.23.5, preview | Same space; question at the bottom, on the answer | Board still; the gap moved under the timer and read the same |
| considered | No reserved space; the header slides up for long questions | No gap, but the timer moves; rejected |
| 3.23.6 | The space becomes a card; label and question centred | Board still; equal space above and below; chosen |
Decision
Every question in the run is laid out, hidden, in the card's one grid cell, so the browser sizes the card to the longest one at the player's own width and font size. The visible label and question sit centred in it. The card uses the existing card treatment: --raise fill, 1px --rule, radius 14.
Evidence
Board movement over 14 skips, with scroll anchoring off as on iOS Safari:
| Width | Before (3.23.3) | After (3.23.6) |
|---|---|---|
| 320 | 71px | 0px |
| 375 | 47px | 0px |
| 390 | 24px | 0px |
| 430 | 52px | 0px |
Card height constant within a run; space above and below the question equal to the pixel. Approved on a phone by the owner before it shipped.
Consequences
- New rules: the play surface never moves, and spare space is padding, not a gap.
- The card adds about 20px, so on a 390×844 phone the page scrolls slightly.
- The longest question sets the card, so long clues cost every question space. New clues are capped at 80 characters; 20 existing ones run over.