the-ui-works-on-a-phone — Every first-party surface works on a phone, and the primary flow is accepted there

○PLANNED 0 of 4 issues done

ready

2

blocked

2

active

0

verify

0

done

0

cancelled

0

Problem

On 2026-10-08 the owner reported that the app is not mobile first and its drawers do not work on a phone, which harms adoption. The ui audit sweeps every declared width for overflow and accessibility, but nothing presses the narrow-screen menu's Escape or follows its focus, no rule sizes a touch target, and the only end-to-end walk of the IDD loop (case 3220, branch) runs at a desktop width. Proposed in ADR 0215 (A phone is the baseline width of every first-party surface, and the primary flow is accepted there before a surface grows) (proposed; it carries no authority until the owner accepts it). Sources: chatgpt-majordomus:c197#0, chatgpt-majordomus:c197#1, chatgpt-majordomus:c193#8, chatgpt-majordomus:c193#9, chatgpt-majordomus:c216#6.

Outcome

The narrow-screen menu behaves as one tested component on /ui and /cockpit, the audit refuses a control a thumb cannot hit, the dense screens have a phone projection, and the IDD loop is accepted at the floor width.

Current state

Verified on master 707a04c7ce8: only /ui has a narrow menu, the mj-ui-menu checkbox (apps/majordomus-cli/src/ui/shell.rs); the Cockpit's sidebar is hidden below 1024 px (share/cockpit/src/cockpit.css), so its sections are reached there only through the JavaScript palette; scripts/lib/ui-audit.mjs runs axe with the wcag22aa tag, whose target-size check holds 24 px, and has no baseline; share/design/tokens.yaml declares viewports but no touch target; scripts/lib/interaction-specs judge only the built site; I1016 (the Cockpit works on a phone) is BLOCKED on I1009; case 3220 (the IDD walk) is branch-only.

Desired state

Each gap is closed by one issue: a shared drawer shell held by cockpit-probe at every declared width, axe's target-size raised to a declared token with a shrinking baseline, the IDD walk at the floor width, and a phone projection of dense tables and graphs.

Scope

• share/ui
• share/cockpit
• share/design/tokens.yaml
• scripts/lib/ui-audit.mjs
• scripts/lib/interaction-specs
• apps/majordomus-cli/src/ui
• scripts/lib/cockpit-probe.mjs
• .ai/repo/rules/project/ui-conformance.v1.md

Out of scope

• A mobile-only route, component or stylesheet
• The site's own navbar, already held by nav-collapse

Acceptance criteria

• cockpit-probe drives the drawer on /ui and /cockpit at every width /api/v1/design declares
• The ui audit's target-size check holds every discovered page at the floor width, outside its baseline
• Case 3220's walk passes at the floor width once the case is on master
• No listed table or graph scrolls the page at the floor width

Validation

• majordomus plan validate
• scripts/ui audit --json

Risks

• Raising the touch target may reflow the navbar the site shares (I2770); the bar comparison must stay green
• 2b's I2911 (master/detail at 1024 px) and I2919 change the same screen; the phone case must run after they land

Issues

Each one is an execution contract with its own acceptance criteria, validation command and required evidence. The wave column is the layer of the dependency graph it sits in.

The graph

flowchart LR
    I3214["I3214<br/>The narrow-screen menu of /ui and /cockpit closes on Escape, on a choice and on its backdrop, and returns focus to its toggle"]:::ready
    I3215["I3215<br/>The ui audit refuses a control a thumb cannot hit at the floor width"]:::ready
    I3216["I3216<br/>The IDD loop is accepted at a phone's width as it is at a desktop's"]:::blocked
    I3217["I3217<br/>A wide table on a UI screen is a stacked list below the narrow width, from the same rows"]:::blocked
    I3214 --> I3216
    I3214 --> I3217
    classDef done stroke:#16a34a,fill:#dcfce7,color:#14532d,stroke-width:2px
    classDef active stroke:#2563eb,fill:#eff6ff,color:#1e3a8a,stroke-width:2px
    classDef verify stroke:#7c3aed,fill:#f5f3ff,color:#4c1d95,stroke-width:2px
    classDef ready stroke:#0891b2,fill:#ecfeff,color:#164e63,stroke-width:2px
    classDef planned stroke:#0891b2,fill:#ecfeff,color:#164e63,stroke-width:2px
    classDef blocked stroke:#b45309,fill:#fffbeb,color:#78350f,stroke-width:2px
    classDef cancelled stroke:#6b7280,fill:#f9fafb,color:#374151,stroke-width:2px
    classDef superseded stroke:#6b7280,fill:#f9fafb,color:#374151,stroke-width:2px

Canonical record: .ai/repo/project/milestones/the-ui-works-on-a-phone.yaml. Read it back with majordomus plan show the-ui-works-on-a-phone.