fix(agenda): give the speakers on a phone the size and ink they need - #340
Merged
Conversation
In the mobile list a row's last line reads "Abdel Sghiouar · The Big Track", and it was set at `--fs-label` (0.78rem) with every word in `--color-grey`, under a Bebas title running at `--fs-row-sm`. So the one line that says WHO is talking was the smallest and dimmest thing in the row — on a phone, where that line is also what separates two parallel talks at the same time, it barely registered. - The line takes the UI step (`--fs-ui`), with the letter-spacing eased from 0.04em to 0.02em now that it is carrying more type. - The speakers take `--color-cream`; the room stays `--color-grey` beside them. The names are what the visitor is scanning for, the room is the aside. - The mugshots go 26px → 34px in a list row. 26 is sized for the tightest cell on the desktop sheet; a list row has width the grid does not, and the photo sat smaller than the type next to it. Desktop is untouched: the grid's own `.cellFoot` keeps 26px photos and `--fs-label` speakers, where the cell is dense and the room is a column heading rather than part of the line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Following the first pass, two things were still wrong on a phone. **The time was a range on one line**, wrapping wherever it happened to run out of room, and the column was sized for two clocks side by side (`min(5.5rem, 27.5vw)`). It is set as start over end now, always — the dash stays on the first line so the text content is still `09:50–10:30` and a screen reader reads a range, not two loose numbers. One clock wide instead of two gives the title back about 30px of a 375px viewport, and the times read as a column down the page, so finding what is on at two is one eye movement. **The speakers were still small.** Mono sets small for its nominal size, so the meta line takes `--fs-lede` rather than `--fs-ui` (15.2px → 19.2px) and the mugshots go 34px → 40px to match. The room moved out from beside the names onto its own line under them, at `--fs-ui` in `--color-grey`: joined by a dot, "Abdel Sghiouar · The Big Track" wrapped mid-phrase at that size, which is exactly where the line does its work. `.itemFoot` aligns to `flex-start` so the photo sits beside the names rather than floating between the two lines. Desktop is untouched: 26px photos, `--fs-label` speakers, no cell overflowing. Verified at 320 / 375 / 430 / 768 / 1024 and at a 32px root: times on two lines everywhere, nothing clipped inside a row, no horizontal scroll, tap targets over 44px. `npm run build` and `npm run a11y` pass. Co-Authored-By: Claude Opus 5 <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.
Summary
On a phone the agenda is the time-ordered list, and each row ends with a line reading
Abdel Sghiouar · The Big Track. That line was set at--fs-label(0.78rem) with every word in--color-grey, sitting under a Bebas title at--fs-row-sm— so the one line that says who is talking was the smallest and dimmest thing in the row, and it is also what tells two parallel talks at the same time apart.Behavior
--fs-ui, 0.95rem — 12.5px → 15.2px), with letter-spacing eased 0.04em → 0.02em now that it carries more type.--color-cream; the room stays--color-greybeside them. The names are what a visitor scans for, the room is the aside.Desktop is untouched — the grid's own
.cellFootkeeps 26px photos and--fs-labelspeakers, where the cell is dense and the room is a column heading rather than part of the line.Verification
#E8E0CC, photos 34px, no horizontal scroll.npm run buildandnpm run a11ypass.Files
src/components/Agenda.tsx— the speakers get their own span so the room can stay the quieter half of the linesrc/components/Agenda.module.scss—.itemMeta, new.itemNames, list-row avatar size🤖 Generated with Claude Code