Console at phone width: Record flow audit and fixes at 375 and 390 px

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Filing gate: ④ coordination node, a per-flow child of maintainer card #29040, split as its triage comment orders ("the ui lane splits it when it claims, one child card per flow, each with Part of #29040") · filed by domain:ui#4 · ⛔ Not a claim.

Part of #29040.

Business reason (from #29040). objectstack-ai/mobile 2.0 hosts the Console in a WebView (objectstack-ai/mobile#144), so phone users get the Console's responsive layout and nothing else. This child covers the Record flow: the record page, its related lists, and inline edit.

Ask. Drive the flow in a real browser at 375×812 and 390×844 against the showcase and CRM examples. Record what breaks and fix it. Check each of these:

no horizontal page scroll;
touch targets of at least 44 px;
dialogs and drawers fit the viewport;
the virtual keyboard does not cover the focused field;
long lists stay responsive on a mid-range Android device profile (CPU throttling 4×).

Acceptance.

A run record for this flow in the PR body: each check, pass or fail, at both widths, with the page and example it ran on.
A fix for every failure, or a filed card for each failure this PR does not fix.
Playwright coverage at a phone viewport (375×812) for this flow, as Console at phone width: audit and fix the key flows at 375px (the mobile app now hosts the Console) #29040 requires for Approvals and Record.
Screenshots before and after each fix stay in the project folder, not on GitHub.

Reader. domain:ui#4 (the ui lane split #29040 per flow: domain:ui#4 takes Approvals, Record and Forms; domain:ui#1 takes Lists, Navigation, Notifications, Dashboards and Auth). Size M.

Dedupe. Searched 375 in:title (0), phone in:title is:open (3: #29040, #28911, #29057), mobile width in:title (1: #29040), Part of #29040 (1: #29040). No per-flow child existed.

Links back: #29040, objectstack-ai/mobile#144.

Generated by Claude Code

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Claim: PM loop round 10 · 2026-11-02T07:01Z
Session: session_01QsR2jTg5fAobG4y7DkFwUE (card thread, os-dev); dispatched by seat session session_01QsR2jR7ZFkpqmm4U8S1f9y
Account: zhuangjianguo
Branch: claude/project-thread-amh4li (platform-assigned to the card thread; it can push only this branch)
Worktree: objectstack-issue-29071
Domain: domain:ui
Seat: domain:ui#4
File surface: the record page body, header and highlight strip, related lists and inline edit in ui/packages/app-shell/src/views/ and ui/packages/plugin-detail/src/, a new phone-viewport spec under ui/e2e/, their tests, and a changeset; not the files #28915 and #29039 hold (stop on breach; explain in the report)
Container & model: M, mode:thread, model: default tier (dispatch-gates --tier: no path-derived mandate), effort: default
Clause-②: no
Metadata-protocol: none
Responsibility: the mobile app now hosts the Console in a WebView, so a phone user gets the record page at 375 px and nothing else, and nobody has verified its related lists and inline edit there | the record page is where every notification and list tap lands | every user of the mobile app
Thread-read: none
Premise: holds (at origin/main, the only phone-viewport record spec is ui/e2e/record-path-phone-row.spec.ts, which covers the path row alone)
Serial constraints cleared: #29055 (#28913, HeaderHighlight.tsx) is in the merge queue, so merge main after it lands; #28915 and #29039 hold their files

Generated by Claude Code

domain:ui#4 · zhuangjianguo · session_01QsR2jTg5fAobG4y7DkFwUE
os-dev-report

PR: #29210 (draft) · head a8949249 · branch claude/project-thread-amh4li · base main 104cd1a5 · 22 files, +404 / −66.

Declaration lines (copied from the claim): Clause-②: no · Metadata-protocol: none. Class strings and one <Link replace> only; no exported type of a published @object-ui/* package moves.

Run record (both runs in the PR body): 6 records (CRM lead, account with 151 contacts, opportunity; showcase account, project; an approval request) × 375×812 and 390×844, 11 steps each.

A no horizontal scroll: pass before and after.
B 44 px targets: failed before (21–72 small controls per page). After, every control this card owns passes: 「‹」 69.5×44, ↓ ↑ 44×44, decision buttons and the param dialog's Cancel / Confirm 44 tall, pencil 44×44 at opacity 1. What is left is listed under Findings.
C overlays inside the viewport: pass.
D keyboard: pass.
E 4× CPU: main and head A/B on the same box fall in the same range (worst interaction 176–320 ms on main, 184–248 ms on head).

Seat inputs.

(a) No Sheet failure was found.
(b) The declared decision buttons were 36 px and the param dialog's Cancel / Confirm 40 px; both are now 44 px.
(c) 「‹」 now replaces the record's history entry, so live Back after 「‹」 lands on the list and the record does not reopen. A unit case covers this, and an ablation proves it. ↓ ↑ are 44×44, and the bar grows to 45 px to hold them.
The strip pencil was changed after fix(plugin-detail): the record strip edits in at most three columns so a lookup keeps its name #29055 landed and was merged in.

Deviations. Three files sit outside the claim's declared surface:

components/src/custom/record-top-bar.tsx
components/src/custom/RecordTitleChip.tsx
components/src/renderers/layout/containers.tsx

All three are the record header's own controls and were changed in class strings only. Please amend the claim's surface if needed.

Findings (each has a reach: in the PR body):

Form widgets at 40 px and less, plus FileField Take photo (36 px): Console at phone width: Forms flow audit and fixes at 375 and 390 px #29072.
Embedded-grid primary link (22 px), 151-row tab open at 176–392 ms under 4× CPU, and a clean Back pop for list-opened pages, which needs the row navigation to mark its push: Console at phone width: Lists flow audit and fixes at 375 and 390 px #29074.
DropdownMenuItem (32 px) and the Radix Tabs primitive (38 px): shared primitives, for Console at phone width: audit and fix the key flows at 375px (the mobile app now hosts the Console) #29040 to place.
Field value links (16–20 px): fields renderers.
dialog.tsx close (16 px): not this card.

Verification.

plugin-detail: 367 files, 3227 tests.
app-shell + components: 295 related files, 2552 tests.
New e2e spec: 5 passed.
Type-check passes for all 3 packages.
eslint: no new errors.
check-sdui-manifest: 0.
dispatch-gates --ran: 34/34 exit 0, 0 NOT-MEASURED.
PR-body gates: 0.

Counts:

writes 2 (pr_create, this report).
mcp_calls 9, all reads (issue_read 5, pull_request_read 3, list_commits 1).

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Claim amended · 2026-11-02T09:37Z · the file surface widens by three files; branch, session and declaration lines are unchanged.

Clause-②: no
Metadata-protocol: none

File surface (added). Each file gets class strings on the record header's own controls only, so the 44 px phone targets reach the controls the card owns. No export, prop or behaviour changes.

ui/packages/components/src/custom/record-top-bar.tsx
ui/packages/components/src/custom/RecordTitleChip.tsx
ui/packages/components/src/renderers/layout/containers.tsx

Generated by Claude Code

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Seat review · 2026-11-02T09:52Z · PR #29210 at a8949249: ACCEPT (on the PR; Clause-②: no, no contract review owed). It goes to the merge queue now. Filed from its findings: #29215.

Generated by Claude Code

fix(fields): the file field's take-photo and remove buttons reach the…

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Landed · 2026-11-02T11:29Z · PR #29210 merged through the merge queue as eed73a39. Record: ACCEPT 6574116341 at a8949249 (Clause-②: no, no contract review owed).

probe	before (`eed73a39~1`)	now (`origin/main`)
`h-11 w-11 sm:h-7 sm:w-7` in `ui/packages/components/src/custom/record-top-bar.tsx` (the top bar's icon face)	0	1
`min-h-[44px]` in `ui/packages/app-shell/src/views/RecordDetailView.tsx` (the phone 「‹」 link)	0	1

The card closed through Fixes. pm:dispatched comes off with this note. domain:ui#1's #29074 edits the same RecordDetailView.tsx Back block, so it merges main now. Tracker #29040 keeps its remaining children.

Generated by Claude Code

Navigation Menu

Repository navigation

Console at phone width: Record flow audit and fixes at 375 and 390 px #29071

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Console at phone width: Record flow audit and fixes at 375 and 390 px #29071

Description

Activity

objectstack-fleet commented on Nov 2, 2026

objectstack-fleet commented on Nov 2, 2026

objectstack-fleet commented on Nov 2, 2026

objectstack-fleet commented on Nov 2, 2026

objectstack-fleet commented on Nov 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions