Date: 2026-05-19
Viewport tested: 375 x 812 (mobile, deviceScaleFactor 2, isMobile)
Pages: Runtime Workbench, Briefings, Reports
Method: Playwright headless screenshots + own analysis + Kimi (kimi-for-coding CLI) second opinion
Screenshots: /tmp/mux-kimi-{page}-{fold,full}.png
No horizontal overflow on any page (scrollW == clientW == 375 everywhere). Viewport meta present on all three. Core mobile problems are touch-target size, list weight (no pagination/virtualization), and native <audio> players in dense lists.
PAGE 1: Runtime Workbench (/runtime-workbench)
Screenshots: /tmp/mux-kimi-runtime-workbench-fold.png, -full.png
Major
- Ticket body text too small + low contrast. Monospace block (~11px, grey on near-black, unwrapped technical lines). Mobile users must pinch-zoom; eye strain; long tokens (
CHAT_HISTORY_INTERNAL_MESSAGE_TYPES) push readability. Fix: font-size:16px; line-height:1.5; white-space:pre-wrap; overflow-wrap:break-word; contrast >=4.5:1 (e.g. #e4e4e4 on #121212).
Minor
- Header chrome overload. Top card crams ticket title +
Mini/Full toggle + Switch/Console buttons into one narrow header (see -fold.png top). Cognitive overload, mis-tap risk. Fix: collapse view toggles to a single <select> or scrollable pill row; secondary actions into an overflow ⋯ menu (one 44px button).
- Action pill row too short and packed.
Status / Runtime / WAT / Session pills ~30px tall, edge-to-edge, zero gap. Below 44px touch minimum; side-swipe mis-taps. Fix: 2x2 grid, min-height:44px; gap:8px; padding:12px 16px.
- Bottom nav crams 6 items into 375px (~62px each: Overview/Board/Workbench/Tasks/Apps/Console). Tiny labels, adjacent mis-taps. Fix: trim to 4 primary + "More", or horizontal-scroll nav with
min-width:72px.
Polish
- Banner CTA not block-level. "Send + resume runtime" button sits inline in the blue offline banner; gets lost on a narrow screen. Fix:
display:block; width:100%; min-height:44px inside banner below ~400px.
PAGE 2: Briefings (/briefings)
Screenshots: /tmp/mux-kimi-briefings-fold.png, -full.png (full page ~50,000px tall)
Blocker
- 95 briefings + 95 native
<audio> elements + 17 <table> tags all rendered at once. HTML is 690KB / 10,015 lines; page is ~50,000px tall. No pagination, no lazy-load, no virtualization. Mobile browser instantiates 95 media decoders and paints a massive DOM — severe jank, battery drain, possible crash on low-end phones. Fix: paginate to 10-15 per page OR virtual-scroll; replace each native <audio> with a static poster + 48px play button that injects the real player on first tap; convert the 17 tables to stacked card rows.
- 405 tap targets under 44px. Across briefing cards + native audio controls. Reliable tapping impossible — users hit the wrong briefing's action, or mute instead of play. Fix: global
button,a,[role=button]{min-height:44px;min-width:44px}; one custom 48x48px play button per card; consolidate per-card action rows into a single "Actions" button opening a bottom sheet.
Major
- Native HTML5 audio player inside every card. Default player ~32px tall, internal buttons 18-24px, inconsistent across devices, unusable in a stacked list. Fix: hide
<audio> visually; large tap-to-play area (>=48px) feeding one sticky bottom player.
- Per-card action buttons wrap to 2 rows. Download / Save Offline / Transcript / Share / Slides wrap (visible in
-fold.png). Breaks vertical rhythm, wall of tiny targets. Fix: single "Actions" button per card (bottom sheet), or full-width stacked buttons at 44px min-height.
Minor
- Filter chips undersized. ALL/CEO/NEWS/RESEARCH/SOCIAL/VOICE-SAMPLES chips ~32px tall, wrap to 2 rows. Below touch minimum. Fix: chip
min-height:44px; padding:10px 16px, or a <select> on mobile.
- CEO Briefing Curation accordion expanded by default. Sits open above 95 cards, pushing core content down an already enormous page. Fix: default collapsed below 768px.
PAGE 3: Reports (/reports)
Screenshots: /tmp/mux-kimi-reports-fold.png, -full.png (full page ~37,600px tall)
Blocker
- 535 tap targets under 44px. Every card action row (Share / PDF / Convert / Delete) plus filter UI. The entire interactive layer is too small for reliable touch — highest sub-44px count of the three pages. Fix: enforce
min-height:44px; min-width:44px on all buttons; replace per-card action rows with one 44px "Actions" button opening a bottom action sheet. (Delete sitting next to Share/PDF at 30px is also a destructive-action mis-tap hazard — separate or confirm it.)
Major
- 120 cards render with no pagination. ~37,600px scroll, heavy DOM, lost positional context. Fix: paginate 15-20 per page or "Load more" with DOM recycling; push filtering server-side to cut initial payload.
- Per-card action buttons ~30px tall and packed. Inside every report card. Precise selection hard. Fix: stack vertically
gap:8px; min-height:44px, or collapse to one Actions trigger.
Minor
- Filter label cramped beside input. "120 shown" jammed next to the full-width search field (see
-fold.png). Input feels squeezed, count easy to miss. Fix: move count below input as a subtitle, or fold into placeholder (Search 120 reports…).
- Bottom nav overcrowded. Same 6-items-in-375px issue as Runtime Workbench. Fix: trim to 4 + "More", or horizontal-scroll nav.
Cross-cutting themes
- No list virtualization/pagination — Briefings (95) and Reports (120) ship the entire dataset to the DOM. Worst on Briefings because of 95 live media elements.
- Touch targets systemically under 44px — 405 (Briefings) + 535 (Reports) + 1 (Workbench). A global button-sizing rule fixes most of it cheaply.
- Native
<audio> in dense lists — Briefings only; replace with a custom play affordance + single sticky player.
- 6-item fixed bottom nav — too tight at 375px on all three pages.
Issue count by severity
| Severity |
Count |
| Blocker |
3 |
| Major |
6 |
| Minor |
6 |
| Polish |
1 |
| Total |
16 |
Top 3 issues overall
- Briefings renders 95 native audio players + 17 tables + 95 cards at once (~50,000px, 690KB HTML) — Blocker. Real crash/jank risk on phones. Paginate + lazy-init audio.
- 535 sub-44px tap targets on Reports (and 405 on Briefings) — Blocker. Touch interaction unreliable across the app; Delete buttons mis-tappable. Enforce 44px minimums + bottom-sheet action menus.
- Native HTML5 audio controls inside every Briefings card — Major. ~32px player with 18-24px internal buttons, unusable in a stacked mobile list. Replace with a 48px custom play button feeding one sticky bottom player.