Console at phone width: Notifications 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 Notifications flow: the notifications inbox, mark read, and opening the target record.

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 is welcome where a fix lands, not required (Console at phone width: audit and fix the key flows at 375px (the mobile app now hosts the Console) #29040 requires it for Approvals and Record only).
Screenshots before and after each fix stay in the project folder, not on GitHub.

Reader. domain:ui#1 (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#1 · zhuangjianguo · session_01QsR2jUJ19MstFvFhjgiYTu

Claim: PM loop round 18 · 2026-11-02T07:03Z
Session: session_01QsR2jS2XRtTSjBZnMRZ9UG (card thread, os-dev); dispatched by seat session session_01QsR2jUJ19MstFvFhjgiYTu
Account: zhuangjianguo
Branch: claude/project-thread-i88cvf (platform-assigned to the card thread; it can push only this branch)
Worktree: objectstack-issue-29076
Domain: domain:ui
Seat: domain:ui#1
File surface: Console files read only for the phone-width audit, plus a root .changeset. The fix surface is declared by a claim amendment after the audit, before any code (stop on breach; explain in the report)
Container & model: M, mode:thread, model: default tier (dispatch-gates --tier: no path-derived mandate), effort: medium
Clause-②: no
Metadata-protocol: none
Responsibility: the Notifications flow of the #29040 phone-width audit (375 and 390 px) and its fixes
Thread-read: none
Premise: holds (at origin/main 6b3ba82c: no PR or run record exists for the Notifications flow; #29040 split comment 6571123115 names this child for domain:ui#1)
Serial constraints cleared: the shared layout (ConsoleLayout, AppShell, UnifiedSidebar) is held by #29075; a fix that needs it is sequenced by the seat.

domain:ui#1 · zhuangjianguo · session_01QsR2jUJ19MstFvFhjgiYTu

Claim amended · 2026-11-02T08:02Z · after the dev's audit (run record /mnt/project-files/issue-29076/run-record-before.md, a production Console build on the showcase and CRM, 375 and 390 px). This sets the fix surface and adds to the round 19 claim 6571189550 on this card. Branch, session and size are unchanged.

Measured: no page scrolls sideways, mark-read and opening the target record work, and the popover opens in 308 to 448 ms at CPU 4x. FAIL: the inbox popover is w-96 (384 px) and is clipped 9 px at 375 px, cutting the Activity tab, Mark all read and the group Mark read. It fits at 390 px with no margin. Popover controls are under 44 px: Mark all read 71x16, tabs 28 tall, Unread/All 24, View all notifications 16, View approvals 36, Open Approvals Inbox and View all activity 16. The account menu's notification switches are 44x24 at both widths. Rows pass at 75 px.
File surface (set): ui/packages/app-shell/src/layout/InboxPopover.tsx: width min(24rem, 100vw - 1rem) plus collision padding; below md, the failing controls get a 44 px minimum height and the tab strip fits (icons hidden, flex-1). The bell trigger's class is Console at phone width: Navigation flow audit and fixes at 375 and 390 px #29075's and stays untouched here. ui/packages/app-shell/src/layout/NotificationPreferencesMenu.tsx: each row becomes a label bound to its switch, 44 px tall below md; switch.tsx is untouched. New tests layout/__tests__/InboxPopover.phoneWidth-29076.test.tsx and layout/__tests__/NotificationPreferencesMenu.phoneWidth-29076.test.tsx, and a root .changeset (patch).
Serial: Console at phone width: Navigation flow audit and fixes at 375 and 390 px #29075 also edits InboxPopover.tsx (the trigger class only). Whichever PR lands second merges main.
Routed elsewhere: the bell's 32 px target goes to Console at phone width: Navigation flow audit and fixes at 375 and 390 px #29075. On the full inbox page, the list toolbar targets and a 367 to 495 ms first-scroll frame at CPU 4x go to Console at phone width: Lists flow audit and fixes at 375 and 390 px #29074 (the generic list view).
Declarations: Clause-② no (className, layout and label binding only; no prop, API or i18n key), Metadata-protocol none, unchanged.

domain:ui#1 · zhuangjianguo · session_01QsR2jS2XRtTSjBZnMRZ9UG
os-dev-report

{
  "issue": 29076,
  "status": "done",
  "branch": "claude/project-thread-i88cvf",
  "pr": "https://github.com/objectstack-ai/objectstack/pull/29165",
  "head": "e2c6f5d4925ad811c236d32ba40fb7e609e68ed9",
  "session": "session_01QsR2jS2XRtTSjBZnMRZ9UG",
  "premise_still_valid": true,
  "summary": "Audit first, then fix. Notifications flow on a production Console build (vite preview, proxied to objectstack dev --fresh) for showcase and CRM at 375x812 and 390x844, isMobile + hasTouch. Failures on main: the inbox popover was w-96 = 384 px, so 9 px were clipped at 375; popover controls were 16-36 px tall; the account-menu notification switches were 44x24. Fixed in InboxPopover.tsx: max-w-[calc(100vw-1rem)] plus collisionPadding 8, and below md a 44 px floor on Mark all read, the tabs, Unread and All (All also min-w-11), View all notifications, View approvals, Open Approvals Inbox and View all activity; tab icons are hidden below md. Fixed in NotificationPreferencesMenu.tsx: each switch row is a label wrapping its switch, 44 px tall below md. After the fix every check passes on both examples at both widths. The bell trigger (32x32) is left to #29075. Keyboard is N/A: the flow has no text field. Run records: /mnt/project-files/issue-29076/run-record-before.md and run-record-after.md, with before/ and after/ screenshots.",
  "tests": "At e2c6f5d4: 47 ui test files naming InboxPopover or NotificationPreferencesMenu (git grep -l, includes the 2 new files, AppHeader and Home suites), locked, --maxWorkers=2: 47 files / 454 tests passed. This is a declared narrowing; the rest of app-shell runs in CI Test UI. Ablation: origin/main's two source files copied in, the new files went 8 failed / 1 passed (the passing one is the blocked-switch guard, which main also satisfies); restore proven by cmp. Browser: before/after audit scripts audit.cjs, prefs.cjs and open4x.cjs are in the project folder.",
  "gates": "dispatch-gates --ran at e2c6f5d4: 34 derived, 34 run, 0 NOT-MEASURED, all exit 0 (incl. check-sdui-manifest and --self-test, ui vitest run scripts/ 169 files passed, check:type-check-debt under the lock). app-shell type-check exit 0 (both tsc legs). eslint --no-inline-config on the 4 changed files exit 0. check:new-line-citations 0 new. PR-body gates on the posted body: check-changeset-no-major 0, check-closing-keyword-parity 0, check-adr-0087-registration 0, check-empty-changeset 0, check-partof-closing-keyword 0. PR check-runs: in_progress at report time.",
  "dogfood_battery": "n/a — no `!` in the PR title and Clause-② is no without a (narrowing) arm",
  "line_budget": "268 insertions, 19 deletions, 5 files; under 3000 lines, so the six-line 速读 is in the body",
  "files_changed": [
    "ui/packages/app-shell/src/layout/InboxPopover.tsx",
    "ui/packages/app-shell/src/layout/NotificationPreferencesMenu.tsx",
    "ui/packages/app-shell/src/layout/__tests__/InboxPopover.phoneWidth-29076.test.tsx (new)",
    "ui/packages/app-shell/src/layout/__tests__/NotificationPreferencesMenu.phoneWidth-29076.test.tsx (new)",
    ".changeset/inbox-phone-width-fit-and-tap.md (new, @object-ui/app-shell patch)"
  ],
  "deviations": [
    "Measurement harness: ui/apps/console was built a second time with VITE_BASE_PATH=/ into the scratchpad, because the relative base of the turbo build cannot serve deep links under vite preview. Nothing was committed. A third build used origin/main's two source files to compare the 4x open time on the same harness; restore was proven by an empty git diff HEAD.",
    "4x CPU tap-to-open over five opens at 375: main 298-662 ms, branch 288-627 ms. One earlier branch series had a single 2.2 s first open on each example. A rerun did not repeat it; reported in the body as noise.",
    "PR body lines 1-2 are the harness attribution block (an HTML comment line), so Fixes #29076 is line 4."
  ],
  "mcp_calls": "1 read: issue_read get 29076",
  "api_writes": "git push x1 (not REST); relay x1 pr_create (#29165, read back identical, no assignees); this report comment x1 via post-stamped",
  "open_questions": [],
  "out_of_scope_findings": [
    "class: (a) touch target; reach: measured in the real Console at 375/390, the top bar's inbox bell trigger is 32x32; carrier: #29075 (holds the trigger class)",
    "class: (a) touch target; reach: measured on /apps/APP/sys_inbox_message?view=mine at 375/390, the list toolbar's view switcher is 125x24 and Filter/Display are 28x28; carrier: #29074 (generic list view)",
    "class: observation; reach: same page at 4x CPU, the first scroll frame took 284-495 ms in some runs and 18-27 ms in others; carrier: #29074"
  ]
}

Generated by Claude Code

domain:ui#1 · zhuangjianguo · session_01QsR2jUJ19MstFvFhjgiYTu

Landed · 2026-11-02T10:20Z · PR #29165 merged through the merge queue as a49d633c at 2026-11-02T10:18Z (GitHub's clock). ACCEPT 6573181552.

probe	before (`a49d633c~1`)	now (`origin/main`)
`100vw` cap in `ui/packages/app-shell/src/layout/InboxPopover.tsx`	0	1
`InboxPopover.phoneWidth-29076.test.tsx` exists	no	yes

Fixes #29076 closed this card. pm:dispatched comes off in the same stroke as this note. PR #29168 (#29075), which also edits InboxPopover.tsx, landed right after it as 07eaec2d.

Navigation Menu

Repository navigation

Console at phone width: Notifications flow audit and fixes at 375 and 390 px #29076

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Console at phone width: Notifications flow audit and fixes at 375 and 390 px #29076

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions