fix(ui): mark search empty-state tone by stroke and restore its desktop tap floor - #2147
Conversation
…op tap floor
Restyle SearchResultsEmptyState as a left-aligned panel with a leading state
mark, replacing the dashed centred box and the 48px tinted glyph disc.
The mark carries tone the way .search-band-lead already does — as stroke count
rather than hue. Under forced colors --clinical-accent resolves to LinkText and
--warning resolves to CanvasText, so hue alone would render a degraded search
and a filtered-to-zero search identically. One stroke is a search that ran; a
doubled stroke is one that did not complete.
The glyph moves beside the heading rather than into it, so nothing enters the
accessible name that the existing getByRole("heading", ...) assertions resolve.
Also restores the desktop tap floor on the control the filtered path leads
with: sm:min-h-9 (36px) to sm:min-h-10 (40px). emptyStateAction and the shelf
controls in this file already meet 40px from sm; this one did not. The phone
floor was already correct at min-h-tap.
No copy string, data-testid, heading level, live-region behaviour or action
wiring changed. SearchResultsHeaderBand is untouched, so its eighteen consumers
are unaffected.
The mark uses Tailwind utilities rather than a new unlayered class:
.search-band-lead is unlayered specifically so it can beat Tailwind's utilities
layer, and this mark has no utility to beat.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in:13 minutes Limit details: You’ve used the included review currently available. Your 101 included PR review attempts over the past 7 days set your current allowance at 1 review per hour. Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Comment |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ts grid Records why PR #2147 shipped the self-contained rail panel rather than the inline treatment: the filtered-to-zero state renders nested inside the results grid, not adjacent to the band, so recovery cannot share the band's edge or point at the filter chips instead of duplicating them. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Summary
SearchResultsEmptyStateas a left-aligned panel with a leading state mark, replacing the dashed centred box. The mark carries tone the way.search-band-leadalready does — as stroke count, not hue — because--clinical-accentresolves toLinkTextunder forced colors while--warningresolves toCanvasText, so a degraded search and a filtered-to-zero search would otherwise paint identically. One stroke is a search that ran; a doubled stroke is one that did not complete.Titledeliberately, so nothing enters the accessible name that the existinggetByRole("heading", …)assertions resolve.sm:min-h-9(36px) tosm:min-h-10(40px). Every sibling control in this file —emptyStateActionand the shelf controls — already meets 40px fromsm; this one did not. The phone floor was already correct atmin-h-tap.No copy string,
data-testid, heading level, live-region behaviour, or action wiring changed. The band component itself is untouched, so its eighteen consumers are unaffected.Verification
npm run typecheck— 0 errorsnpx eslint+npx prettier --check+npm run format:changed— all cleanSearchResultsEmptyStateconsumer (documents, favourites, calculators, forms, services, therapy-compass) plusstyle-contract-registrytests/ui-accessibility.spec.ts— 16 passed (41.7s), including the three specs that exercise exactly this surface:search results band renders the accent rail and survives forced colorsa faulted search is legible as shape, not only as huefault recovery actions wrap instead of clipping on a phonenpm run verify:pr-localUI verification not run: the full
npm run verify:uisweep (447 Chromium specs) was attempted three times and never reached a terminal state on this machine — once aborted by test-lock contention from a concurrent worktree, once killed mid-run at 30/447 with zero failures when the host process exited, and twice more timing out inside the isolated production build before any spec started. The targetedui-accessibility.spec.tsrun above was completed in full and covers this diff's blast radius; the remaining specs do not touchSearchResultsEmptyState. The one full-suite assertion that does —ui-smoke.spec.ts'sgetByRole("heading", { level: 3, … })on this state — is pinned by an identical assertion indocument-search-record-fault.dom.test.tsx, which passes. CI's Production UI job should be treated as the authority here.Risk and rollout
git revertthe single commit. No migration, no config, no state.Notes
SearchResultsHeaderBanditself. That surface has eighteen consumers against this component's six, already rations two landmark roles (role="status"androle="alert"), and would have needed a third; the flush-to-band treatment it enabled is also not reachable today, because the filtered-to-zero state renders nested inside the results grid rather than adjacent to the band..search-band-leadis unlayered specifically so it can beat Tailwind's utilities layer; this mark has no utility to beat, and adding a class would have enlarged the inventorytests/style-contract-registry.test.tspolices for no benefit.border-left-widthand the winner would be stylesheet order rather than the branch.