[UX] Rebuild the at-the-table and mobile experience #365

New issue

Open

opened 2026-08-25 20:39:26 +00:00 by claude-bot · 0 comments

claude-bot commented

2026-08-25 20:39:26 +00:00

Contributor

Found in the August 2026 session lifecycle review (#319).

Why

The product's stated context is live use at a table, likely on a phone or tablet. Three of its four table surfaces are desktop-only. These are inferred from markup and Tailwind classes rather than a running app, but the classes are unambiguous:

Session Shelf — the primary at-the-table GM surface. Five of six header controls are hidden sm:* (session switcher, copy-from, find, table view, end-of-session sweep). Cards are absolutely positioned and cascade at 280 px steps inside a container with no horizontal scroll, so on a 390 px viewport cards 2-4 of every row are off-screen and unreachable. touchAction: "none" on the board suppresses native scrolling over that area. Core interactions — spotlight, quick-switch — are keyboard-only with no touch equivalent.
Wiki article — flex gap-8 with a fixed w-64 aside and no flex-col lg:flex-row, leaving roughly 39 px of article body at 375 px. (The one-class fix for this is filed in v4.3.0 as an immediate mitigation; this issue is the real treatment.)
Campaign detail — collapses to one column, so the DOM order becomes the scroll order: a GM on a phone scrolls past the entire membership roster with per-member edit forms, plus a search box, to reach the session list they opened the page for.

Session Table, the player at-the-table view, is the counter-example and is genuinely fine — single column, no fixed widths, no hidden controls. It is the model the rest should follow.

Acceptance criteria

Session Shelf works on a phone: no unreachable cards, no hidden essential controls, touch equivalents for keyboard-only interactions
Wiki articles are readable at 375 px
Campaign detail orders content by what the user came for
Every surface reachable at 375 px, verified on a real device
Touch targets meet the design system's minimum
The at-the-table journey completes on a phone end to end

Found in the August 2026 session lifecycle review (#319). ## Why The product's stated context is live use at a table, likely on a phone or tablet. **Three of its four table surfaces are desktop-only.** These are inferred from markup and Tailwind classes rather than a running app, but the classes are unambiguous: - **Session Shelf** — the primary at-the-table GM surface. Five of six header controls are `hidden sm:*` (session switcher, copy-from, find, table view, end-of-session sweep). Cards are absolutely positioned and cascade at 280 px steps inside a container with **no horizontal scroll**, so on a 390 px viewport cards 2-4 of every row are off-screen and unreachable. `touchAction: "none"` on the board suppresses native scrolling over that area. Core interactions — spotlight, quick-switch — are keyboard-only with no touch equivalent. - **Wiki article** — `flex gap-8` with a fixed `w-64` aside and no `flex-col lg:flex-row`, leaving roughly **39 px of article body at 375 px**. (The one-class fix for this is filed in v4.3.0 as an immediate mitigation; this issue is the real treatment.) - **Campaign detail** — collapses to one column, so the DOM order becomes the scroll order: a GM on a phone scrolls past the entire membership roster with per-member edit forms, plus a search box, to reach the session list they opened the page for. **Session Table**, the player at-the-table view, is the counter-example and is genuinely fine — single column, no fixed widths, no hidden controls. It is the model the rest should follow. ## Acceptance criteria - [ ] Session Shelf works on a phone: no unreachable cards, no hidden essential controls, touch equivalents for keyboard-only interactions - [ ] Wiki articles are readable at 375 px - [ ] Campaign detail orders content by what the user came for - [ ] Every surface reachable at 375 px, verified on a real device - [ ] Touch targets meet the design system's minimum - [ ] The at-the-table journey completes on a phone end to end

claude-bot added this to the v4.4.0 - UX Overhaul: Design Exploration & Rebuild milestone

2026-08-25 20:39:26 +00:00

claude-bot added the

enhancement

frontend

labels

2026-08-25 20:39:26 +00:00

claude-bot referenced this issue

2026-09-06 19:30:20 +00:00

v4.4.0 build order: UX Overhaul in six phases, with two review checkpoints #535