fix: let the settings panel use the width of the page
Looked at on a 1440px screen it was the one block on the page not using the column it sits in. The rows were held to max-w-3xl inside an 1150px shell, but the section's own rule spans the shell — so every hairline inside the panel stopped a third of the column short of the one above it, between a two-column checklist and a three-column footer that both go full width. The measure was there to keep a name and its state reading as one line, but that pairing is what "running now" already does with a title and its countdown directly above, so full width is the house pattern rather than a stretch. Prose inside a group keeps its measure. The game list was the worse half: eighteen rows of four controls at max-w-md is a thousand pixels of ribbon down the left with two thirds of the screen empty beside it. It takes two columns past lg once there are nine or more games, flowing down then across so the numbers still read in a straight line and an arrow still swaps a row with its neighbour. Below nine, and on a phone, it is unchanged. The last group also loses its bottom rule, which was a second hairline a few pixels above the footer's own. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 5
parent
abed3f86fa
commit
35b3ab8e89
@@ -937,6 +937,16 @@ to an open page). Four things hold it up:
|
||||
Native `<details>` for the reason the reorder arrows are ordinary buttons: keyboard and screen
|
||||
reader reach it without a second implementation. `summary` is not an `a`, `button` or `[tabindex]`,
|
||||
so it needs its own `:focus-visible` rule in `styles.css` — the shared one does not reach it.
|
||||
- **The panel is one column of groups, and it uses the page's width.** Those are two claims and only
|
||||
the first survived a desktop read: the rows were held to `max-w-3xl` inside a shell a third wider,
|
||||
so every rule inside the panel stopped short of the panel's own, and it was the one block on a wide
|
||||
page not using the width — between a two-column checklist and a three-column footer that both do.
|
||||
A name at one end of a row and its state at the other is what "running now" already does with a
|
||||
title and its countdown, so full width is the house pattern rather than a stretch. Prose inside a
|
||||
group keeps its own measure, and the game list — the one thing tall enough to need it — takes **two
|
||||
columns of its own past `lg` once there are nine or more games**, flowing down then across so the
|
||||
numbers still read in a straight line and an arrow still swaps a row with its neighbour. Eighteen
|
||||
rows in one column was a 1,000px ribbon with two thirds of the width empty beside it.
|
||||
- **A game's dailies stay together, and grouping never re-sorts inside a group.** `dailyGroups`
|
||||
(`Dailies.tsx`) emits a game's standing chore followed by that game's repeating events, in the
|
||||
order those arrived; it replaced `[...chores, ...repeating]`, which put a game's chore and its own
|
||||
|
||||
Reference in New Issue
Block a user