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

○PLÁNOVÁNO 0 ze 4 úkolů hotovo

připraveno

2

blokováno

2

aktivní

0

verify

0

hotovo

0

zrušeno

0

Problém

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.

Výsledek

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.

Aktuální stav

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.

Cílový stav

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.

Rozsah

• 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

Mimo rozsah

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

Kritéria přijetí

• 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

Validace

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

Rizika

• 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

Úkoly

Každý z nich je prováděcí kontrakt s vlastními kritérii přijetí, validačním příkazem a požadovanými důkazy. Sloupec wave je vrstva grafu závislostí, v níž úkol leží.

Graf

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.