rbrooks/Quest-Board
Watch
1
0
Fork
You've already forked Quest-Board
 0
Code Issues 58 Pull requests 7 Projects Releases 76 Packages Wiki Activity Actions

Review R2: the wide-screen layout the owner chose (D110, supersedes D90; #366) #825

Merged
claude-bot merged 12 commits from build/review-r2-wide into main 2026-09-26 05:01:25 +00:00
Conversation 0 Commits 12 Files changed 49 +1497 -89
claude-bot commented 2026-09-26 04:15:55 +00:00
Collaborator
Copy link

The owner's pick. The owner compared current, A, B and AB at 2560×1440 (a 4K monitor at 150%) in the real app, and chose:

  • A for the app;
  • AB for This week and the word-heavy public pages (Help, Privacy, Licences & notices, Accessibility).

This builds that choice into the design system. It replaces the throwaway explore/wide-layouts branch, and has no layout switch.

Tokens (src/ui/tokens.css):

  • Fluid root type: clamp(100%, 100% + (100vw − 1440px)/280, 125%), which is 16px up to 1440 and 20px at 2560. It's a percentage, so a reader's own browser default is kept.
  • Frames: --frame 96rem, centred.
  • Measures: --measure 78ch, --measure-long 98ch.
  • Form width: --form 46rem.
  • Rail and aside: in rems.
  • The side-column breakpoint is written once (≥1800px), as switch tokens (--cols, --side-shown, --two-up, …). No page writes that media query.

New components:

  • ui/Columns: a page plus a side column. The side column comes first in reading order.
  • ui/OnThisPage: built from the page's h2s. It keeps existing ids and marks the current section with aria-current as you scroll. It's a named nav, and draws nothing with fewer than two sections.

Each has its states and tests.

Applied:

  • Book pages: a centred 1920px frame. Card grids auto-fill. Home's Needs you goes two-up at 1800.
  • This week: full width, with 98ch prose.
  • Help, Privacy, Licences, Accessibility: a 98ch card, with On this page beside it.
  • Help: a guide strip along the top.
  • Storyline: chapter links and "Jump to the timeline". These are a strip below 1800 and a sticky card from 1800; both were asked for in the review.
  • The white band beside signed-in pages is gone: the legacy wrapper paints paper around a rebuilt page.
  • Found by the render sweep:
    • Recording settings overflowed on a phone; forms are now minmax(0,1fr).
    • Invites' approval switch sat about 1500px from its label; toggle rows are capped at the form width.
  • Phones are unchanged. 390-wide shots are byte-identical to before, apart from the new strip.

Records:

  • Decisions: D110 in intro.md; D90 is marked superseded, not deleted.
  • Catalogue: rebuilt.
  • Also: CHANGELOG and ui/README.
  • Merged in: #823 (R1). R1's fix for the Recording crash is the one kept; R2's duplicate was dropped at the merge.

Tests:

  • Frontend: 174 files and 2373 tests on the merged tree; lint has 0 errors.
  • Journeys: a full journeys.sh run gave 65 passed and 4 skipped (the new J0w's project guards).
    • New J0w: wide screens on the public pages at 2560, plus a phone. It checks the root size, the strip, On this page followed from the keyboard, no sideways scroll, and axe plus landmark scans.
    • J6 now follows Storyline's "Jump to the timeline".
  • Render sweep: 45 pages at 2560, 1920, 1440, 1024 and 390, with no overflow on any rebuilt page. The legacy Admin and wiki pages still overflow at narrow widths; they're noted on #735 and belong to lanes 8 and 9.

A known limit: a sticky side column taller than the window can't be scrolled on its own until the page nears its end.

🤖 Generated with Claude Code

**The owner's pick.** The owner compared current, A, B and AB at 2560×1440 (a 4K monitor at 150%) in the real app, and chose: - **A** for the app; - **AB** for This week and the word-heavy public pages (Help, Privacy, Licences & notices, Accessibility). This builds that choice into the design system. It replaces the throwaway `explore/wide-layouts` branch, and has no layout switch. **Tokens** (`src/ui/tokens.css`): - **Fluid root type:** `clamp(100%, 100% + (100vw − 1440px)/280, 125%)`, which is 16px up to 1440 and 20px at 2560. It's a percentage, so a reader's own browser default is kept. - **Frames:** `--frame` 96rem, centred. - **Measures:** `--measure` 78ch, `--measure-long` 98ch. - **Form width:** `--form` 46rem. - **Rail and aside:** in rems. - **The side-column breakpoint is written once** (≥1800px), as switch tokens (`--cols`, `--side-shown`, `--two-up`, …). No page writes that media query. **New components:** - **`ui/Columns`:** a page plus a side column. The side column comes first in reading order. - **`ui/OnThisPage`:** built from the page's `h2`s. It keeps existing ids and marks the current section with `aria-current` as you scroll. It's a named `nav`, and draws nothing with fewer than two sections. Each has its states and tests. **Applied:** - **Book pages:** a centred 1920px frame. Card grids auto-fill. Home's Needs you goes two-up at 1800. - **This week:** full width, with 98ch prose. - **Help, Privacy, Licences, Accessibility:** a 98ch card, with On this page beside it. - **Help:** a guide strip along the top. - **Storyline:** chapter links and "Jump to the timeline". These are a strip below 1800 and a sticky card from 1800; both were asked for in the review. - **The white band** beside signed-in pages is gone: the legacy wrapper paints paper around a rebuilt page. - **Found by the render sweep:** - Recording settings overflowed on a phone; forms are now `minmax(0,1fr)`. - Invites' approval switch sat about 1500px from its label; toggle rows are capped at the form width. - **Phones are unchanged.** 390-wide shots are byte-identical to before, apart from the new strip. **Records:** - **Decisions:** D110 in `intro.md`; D90 is marked superseded, not deleted. - **Catalogue:** rebuilt. - **Also:** CHANGELOG and `ui/README`. - **Merged in:** #823 (R1). R1's fix for the Recording crash is the one kept; R2's duplicate was dropped at the merge. **Tests:** - **Frontend:** 174 files and 2373 tests on the merged tree; lint has 0 errors. - **Journeys:** a full `journeys.sh` run gave 65 passed and 4 skipped (the new J0w's project guards). - **New J0w:** wide screens on the public pages at 2560, plus a phone. It checks the root size, the strip, On this page followed from the keyboard, no sideways scroll, and axe plus landmark scans. - **J6** now follows Storyline's "Jump to the timeline". - **Render sweep:** 45 pages at 2560, 1920, 1440, 1024 and 390, with no overflow on any rebuilt page. The legacy Admin and wiki pages still overflow at narrow widths; they're noted on #735 and belong to lanes 8 and 9. **A known limit:** a sticky side column taller than the window can't be scrolled on its own until the page nears its end. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Found by the render sweep at 2560: Invites' approval switch sat a monitor's
width from its words.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
GET /api/campaigns/transcription-languages answers { detect, languages: [...] },
and the page mapped over the whole object, so it threw on render at every width
and every real server showed the crash screen. The unit test mocked a bare list,
which is why nothing caught it; it now mocks the server's shape. Found by the
D110 render sweep, which visits every page the lanes built.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Settings, Recording drew again after the previous commit, and on a 390px phone
its retention strip (three unbreakable labels) widened the form's implicit
grid track, pushing every switch off the screen. Found by the render sweep.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts:
#	CHANGELOG.md
# Conflicts:
#	CHANGELOG.md
#	docs/design/redesign-surfaces/sources/intro.md
#	webapp/frontend/src/pages/CampaignSettingsRecording.jsx
#	webapp/frontend/src/pages/CampaignSettingsRecording.test.jsx
#	webapp/frontend/src/shell/PublicPage.jsx
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merge remote-tracking branch 'origin/main' into build/review-r2-wide
All checks were successful
CI / Summarisation accuracy eval harness (stub provider) (pull_request) Successful in 1m52s
Details
CI / Backend lint (ruff) (pull_request) Successful in 1m8s
Details
CI / Feedback site tests (pull_request) Successful in 1m49s
Details
CI / Bot/backend version sync (pull_request) Successful in 55s
Details
CI / Does this change touch the recording path? (pull_request) Successful in 26s
Details
CI / Synthetic session harness (no GPU, no LLM) (pull_request) Has been skipped
Details
CI / Docker image build (pull_request) Successful in 57s
Details
CI / Bot tests and audit (pull_request) Successful in 4m11s
Details
CI / Frontend tests, audit, and build (pull_request) Successful in 17m37s
Details
CI / Backend migration, tests, and audit (pull_request) Successful in 31m23s
Details
CI / End-to-end journeys (desktop, phone, keyboard-only) (pull_request) Successful in 27m20s
Details
edfdf93e2e
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Issue related to the backend

  
bot
Issue related to the bot

  
bug
Something is not working

  
duplicate
This issue or pull request already exists

  
enhancement
New feature

  
frontend
Issue related to the frontend

  
help wanted
Need some help

  
invalid
Something is wrong

  
question
More information is needed

  
recording
Issue related to the recording system

  
security
Security hardening / vulnerability work

  
wontfix
This won't be fixed

No labels
backend
bot
bug
duplicate
enhancement
frontend
help wanted
invalid
question
recording
security
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
rbrooks/Quest-Board!825
No description provided.