Skip to content

7.0.1 Mobile Responsiveness Pass — Design

Ticket: PHON-199 Date: 2026-07-21 Scope: Therapy Pack editor + landing/nav — primary MVP flow, end-to-end on a phone-width viewport (390px reference). Aesthetic/responsiveness patch before the 7.0.0 staging build is promoted to prod.

Problem

Live staging review at 390px surfaced two crowding defects plus one adjacent issue in the pack editor:

  1. My Materials dialog rows — each ListItem uses MUI secondaryAction holding four icon buttons (Open / Rename / Duplicate / Delete), absolutely-positioned and vertically centered over a 3-line text block (title + two caption lines) with only pr: 2 of clearance. On narrow widths the icon cluster overlaps the metadata text ("N contrasts · N sentences"), which is cramped and partly unreadable/untappable.
  2. "+ Add pair" row (ContrastAddField) — a single non-wrapping flex row with two maxWidth: 140 fields + the Add button. On narrow viewports it compresses instead of wrapping, and the "Add pair" label breaks across two lines.
  3. Adjacent: ManualAddField and SentenceAddField share the same non-wrapping pattern; PackSection header row (title + "Add from {tool}" button) does not wrap.

Landing target tiles, AppHeader, and AppSidebar (temporary drawer on mobile) already respond correctly — verified live, left unchanged.

Changes

Fix 1 — MyPacksDialog.tsx

  • Convert each row's primary content to a tappable ListItemButton whose action is Open the set (primary action).
  • Replace the four inline icon buttons with a single trailing overflow menu (MoreVert → Menu) containing Rename / Duplicate / Delete. One trailing control eliminates the overlap and declutters desktop as well. Rename continues to swap an inline TextField.
  • Make the Dialog fullScreen at the xs breakpoint (useMediaQuery(theme.breakpoints.down('sm'))) so the list has full phone width.

Fix 2 — add-field rows (ContrastAddField, ManualAddField, SentenceAddField)

Consistent responsive treatment: - Container: flexWrap: 'wrap', alignItems handled so wrapped items align left. - Inputs: flex: 1 with a min basis; drop the hard maxWidth cap at xs, keep a cap at sm+ so fields don't stretch awkwardly on desktop. - Add button: flexShrink: 0 so it wraps to its own full-width line on xs rather than compressing/breaking its label.

Fix 3 — PackSection.tsx

  • Header Stack gets flexWrap: 'wrap' + gap so the "Add from {tool}" button drops below the title on narrow widths instead of crowding it.

Version

  • Bump 7.0.0 → 7.0.1 in packages/web/frontend/package.json and packages/web/workers/package.json (the product-metadata drift test requires both). All display strings derive from PRODUCT.version; no literals to touch.

Non-goals

  • No changes to the six standalone tools, export pipeline, data, or API.
  • No redesign of the editor information architecture — this is a responsiveness/crowding patch only.

Verification

  • Re-screenshot the editor, My Materials dialog, and add-pair row at 390px against a local build.
  • npm run build + type-check + lint (frontend); npm test (workers) before opening the PR.
  • PR targets develop (staging), consistent with git-flow.