fix(components): give the Dialog close button a 44 px touch target at phone width - #29204

domain:ui#2 · zhuangjianguo · session_01QsR2jRFuJz9QBZqPVHYVhJ

Requested by Steedos · project thread

Fixes #29107

Clause-②: no
Metadata-protocol: none

维护者速读

• 改了什么:手机宽度(小于 sm 断点)下,所有弹窗右上角的关闭按钮从 16×16 px 的点击区扩大到 44×44 px,图标本身仍是 16 px;桌面宽度下按钮样式一字未改。
• 为什么改:移动端 App 用 WebView 承载 Console,手机用户打开的每个弹窗(操作参数弹窗如审批「驳回」、命令面板 ⌘K 等)都用这一个共享 Dialog,关闭按钮太小、经常点不中。
• 风险与回滚:只加了 max-sm: 前缀的样式类,桌面不受影响;图标在手机上向内移动 2 px(距角 17 px → 19 px)。回滚即 revert 本 PR。
• 先看:ui/scripts/shadcn-local-patches.mjs(新增的 phoneCloseTouchTargetPatches 补丁声明)、ui/packages/components/src/ui/dialog.tsx(Close 那一行)、ui/packages/components/src/__tests__/dialog-close-touch-target-29107.test.tsx。
• 两分钟验证:pnpm --dir ui exec vitest run packages/components/src/__tests__/dialog-close-touch-target-29107.test.tsx scripts/__tests__/shadcn-local-patches.test.ts,预期全绿;或在 375 px 宽的 Console 里按 Ctrl+K,关闭按钮的点击区是 44×44。
• 需要你做的:无,席位落地。

What changes

• The close button DialogContent draws in its top-right corner gets a phone-only touch target: below sm it is a 44 x 44 px flex box placed 4 px from the corner with the 16 px glyph centred (max-sm:right-1 max-sm:top-1 max-sm:flex max-sm:size-11 max-sm:items-center max-sm:justify-center, the class set Console at phone width: Dashboards flow audit and fixes at 375 and 390 px #29078 uses for the Sheet close). From sm up the class list is upstream's, token for token, so the desktop header does not grow.
• dialog.tsx is a Shadcn-synced file (ui/AGENTS.md commandment 7), so the change is declared as a local patch, phoneCloseTouchTargetPatches('Dialog') in ui/scripts/shadcn-local-patches.mjs, anchored on the opening of the Close element's class list as the vendored registry fixture spells it. The shipped dialog.tsx line was written by applying that patch to the file, so REGISTRY_FIXTURES.dialog keeps its byte round trip (roundTrip: true) and the next pnpm shadcn:update re-applies it instead of reverting it. The helper takes the Radix prefix, so the Sheet close can take the same family.
• Both sites the card names render DialogContent's own close: the declared-action param dialog (ActionParamDialog, e.g. the sys_approval_request Reject decision) and the command palette (CommandDialog).
• ui/packages/components/shadcn-components.json: dialog's localEdits note now names the phone close touch-target patch beside the i18n close patch (claim amendment 6573487904).
• Changeset .changeset/29107-dialog-close-phone-touch-target.md: @object-ui/components patch.

Tests

• New ui/packages/components/src/__tests__/dialog-close-touch-target-29107.test.tsx: on DialogContent and on CommandDialog, the Close carries the six phone classes, every class without the max-sm: prefix equals upstream's list in order, and the glyph keeps h-4 w-4.
• ui/scripts/__tests__/shadcn-local-patches.test.ts: the dialog declares the new patch id; applied to the registry bytes it adds the phone classes and leaves upstream's Close classes unchanged; it refuses (only that patch, the close-label family still lands) when upstream moves the Close off right-4 top-4. The two close-label counts on dialog are scoped to their own family.
• Ablation, one-shot, at 20e48bf: with dialog.tsx restored to main's bytes (tree only, restored from HEAD afterwards, git status clean), 4 cases go red: both new component cases, "dialog.tsx carries its declared patches" and "dialog: byte round-trip holds".

Acceptance notes

• The glyph moves 2 px on phones: it sat 17 px from the dialog's top-right edge (16 px placement plus the 1 px border) and now sits 19 px (4 px placement + 1 px border + 14 px centring inside 44 px). That is the cost of matching Console at phone width: Dashboards flow audit and fixes at 375 and 390 px #29078's class set; max-sm:right-0.5 max-sm:top-0.5 would keep it at 17 px.
• The 2 px glyph shift above is accepted by the seat: it keeps the Dialog and Sheet class sets identical.
• sheet.tsx's close is Console at phone width: Dashboards flow audit and fixes at 375 and 390 px #29078's; REGISTRY_FIXTURES.sheet is roundTrip: true as well, so a bare class edit there reds "sheet: byte round-trip holds" unless it is declared the same way.

Verification

• Real browser, showcase backend plus the Console Vite dev server, Playwright at 375 x 812 and 1280 x 800, measuring the dialog element's own Close (screenshots and the script stay in the project files, not here):
  • Before (main's dialog.tsx): param dialog and command palette Close are 16 x 16 px at 375 px and at 1280 px.
  • After: 44 x 44 px at 375 px on both sites, glyph 16 x 16; at 1280 px both are still 16 x 16 px at the same position.
• Local gates at 20e48bf: the 36 families dispatch-gates --commands derives for this diff all exit 0 (--ran reconciliation: 36 derived, 36 run, 0 NOT-MEASURED), including node scripts/check-sdui-manifest.mjs and pnpm --dir ui exec vitest run scripts/ (169 files, 4903 tests passed). @object-ui/components type-check (including tsconfig.test.json) exit 0; eslint on the four touched source files exit 0; pnpm check:new-line-citations 0 new.
• After merging main (d0c0add, no main commit touches these files): the three touched test files re-run green (66 tests).
• At cc550d3 (the localEdits note): the same 36 derived families; the files that read shadcn-components.json plus the patch and dialog tests re-run green (5 files, 92 tests), check:published-files, check:nul-bytes and check-empty-changeset exit 0.
• At 1855aa3: snapshot-critical.test.tsx ("Dialog snapshots > renders open dialog structure", red in Test UI 10/16 on cc550d3) regenerated with vitest --update; the .snap diff is the Close line only, gaining the six max-sm: classes. A sweep of every *.snap, *.test.* and *.spec.* file for the Close class list (right-4 top-4 rounded-sm, rounded-sm opacity-70, data-[state=open]:bg-accent data-[state=open]:text-muted-foreground) finds no other pin. The snapshot file and the dialog test re-run green (2 files, 22 tests); the whole components package did not finish locally within 560 s, so CI Test UI carries it.

Human Minimum

• 1. Schemas start as Zod; packages/spec holds no runtime logic.
• 2. Every name I added uses the casing for its kind.
• 3. No formatter ran; pnpm lint passes.
• 4. One issue, one branch off an up-to-date main, one pull request.
• 5. A change that publishes carries a changeset, and both declaration lines are filled in here and in the changeset.
• 6. packages/spec touched: its generated artifacts are regenerated and committed.
• 7. No hand edits to content/docs/references/, packages/*/CHANGELOG.md or content/docs/releases/.
• 8. Title, body and comments are in English.
• The Before Submitting list in CONTRIBUTING.md is done.

Generated by Claude Code