Skip to content

Fix differential badge design for mobile search results - #418

Merged
BigSimmo merged 5 commits into
mainfrom
cursor/differential-badges-main-d3de
Jul 9, 2026
Merged

Fix differential badge design for mobile search results#418
BigSimmo merged 5 commits into
mainfrom
cursor/differential-badges-main-d3de

Conversation

@BigSimmo

@BigSimmoBigSimmo commented Jul 9, 2026

Copy link
Copy Markdown
Owner

Summary

Fixes two badge layout issues on the differentials mobile search results screen.

  1. Urgency badge (EMERGENT) — Pill shape, fixed h-6, solid danger fill, and status dot. Prevents uppercase text clipping on small screens (especially mobile Safari).
  2. Filter tabs (All, Presentations, Diagnoses) — Horizontally scrollable flex row with split label/count pills, integrated with existing kindFilter state, tablist semantics, 44px touch targets, and focus rings.

Diff: 3 files against main (includes dark-mode contrast follow-up).

PR history

PRStatusNotes
#412MergedLanded against a stale base; badge fix did not reach current main cleanly
#416ClosedSuperseded by this PR — targeted archive/local-main-wip-20260705 and showed a misleading ~13k-line diff
#418OpenClean branch cursor/differential-badges-main-d3de rebased on current main

Changes

Review feedback addressed

  • Codex P2 (dark mode contrast): Emergent badge no longer uses --danger (text token) as a background fill in dark mode. It now uses dedicated --danger-solid / --danger-solid-contrast tokens that keep saturated red + white text in both themes.

Verification

  • npm run format:check — passed
  • npm run test:e2e:chromium -- tests/ui-tools.spec.ts -g "differentials search badges" — passed at 375px viewport

Clinical Governance Preflight

N/A — layout-only UI change; no ingestion, answer generation, search ranking, privacy, or clinical output logic touched.

Notes

Ready to merge. Supersedes the closed#416.

Open in WebOpen in Cursor

@supabase

supabaseBot commented Jul 9, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@BigSimmo
BigSimmo enabled auto-merge (squash) July 9, 2026 03:44

@chatgpt-codex-connectorchatgpt-codex-connectorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:c8f4585826

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment threadsrc/components/clinical-dashboard/differentials-home.tsx Outdated
auto-merge was automatically disabled July 9, 2026 04:09

Head branch was modified

@BigSimmo
BigSimmo enabled auto-merge (squash) July 9, 2026 04:09
@cursor
cursorBotforce-pushed the cursor/differential-badges-main-d3de branch from c2e9273 to 5d8bf23CompareJuly 9, 2026 04:10
@BigSimmo
BigSimmo disabled auto-merge July 9, 2026 04:14
@BigSimmo
BigSimmo enabled auto-merge (squash) July 9, 2026 04:17
cursoragentand others added 5 commits July 9, 2026 04:22
Rebased onto main and integrated with catalogue kind filters.
- Redesign StatusBadge as pill with fixed height, solid emergent fill, and
status dot to prevent text clipping on small screens
- Replace cramped filter tab grid with scrollable flex row using split
label/count pills, tablist semantics, 44px touch targets, and focus rings
- Add narrow-viewport Playwright coverage for single-line tabs and badge
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Add --danger-solid and --danger-solid-contrast tokens so the emergent
status pill keeps high contrast in dark mode instead of using --danger
(which resolves to the pale text token as a background fill).
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
…races
Wrap the accessible-table-surface click and dialog visibility assert in
toPass so CI Chromium can retry when the composer footer briefly covers
the tap target on 390px viewports.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
@cursor
cursorBotforce-pushed the cursor/differential-badges-main-d3de branch from 5d8bf23 to a695951CompareJuly 9, 2026 04:22
@BigSimmo
BigSimmo merged commit ced1925 into mainJul 9, 2026
6 checks passed
@BigSimmo
BigSimmo deleted the cursor/differential-badges-main-d3de branch July 9, 2026 12:35
cursorBot pushed a commit that referenced this pull request Jul 20, 2026
Initialize usesPhoneSearchLayout to false so SSR and the first client
paint match, then sync from matchMedia after mount and on Mode open.
Stops React #418 pageerrors on phone route-coverage journeys.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
cursorBot pushed a commit that referenced this pull request Jul 20, 2026
Capture the React #418 fix evidence and local Playwright revalidation.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
cursorBot pushed a commit that referenced this pull request Jul 20, 2026
* feat(ui): open Mode menu as a phone bottom sheet
On viewports ≤639px the header Mode picker now uses the shared Sheet
bottom sheet so the full mode list is scrollable with backdrop dismiss
and focus restore. Desktop keeps the anchored absolute dropdown and
existing keyboard/blur contracts.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test(ui): tighten phone Mode sheet list assertion
Drop the tautological count check in the phone Mode sheet smoke test.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: harden Mode sheet UX and resolve Python PDF tests
- Resolve python/python3 for PDF extraction when PYTHON_BIN is unset
- Sheet: dismiss backdrop on click; exclude tabindex=-1 from Tab trap
- Mode menu: dialog aria-haspopup on phone, close on breakpoint flip,
host Sheet outside the header grid, clear scope sheet from + menu
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: reliably terminate detached PDF extractor process trees
Always process-group kill on deadline even if the leader already exited,
await close, and poll briefly in the budget test under suite load.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix(ui): require Sheet backdrop gestures to start on the dimmed area
Prevent accidental dismiss when a press begins on the panel and ends on
the backdrop by tracking pointerdown origin before honoring the click.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* style: prettier-format Mode sheet and PDF extractor changes
Satisfy CI Static PR format check on the touched sources/tests.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: record final Mode sheet review in branch ledger
Append the completed PR #935 review outcome and local verification evidence.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: restore accurate PR_POLICY_BODY for Mode sheet PR
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: sync Mode sheet PR policy body and allowlist governance identity
Replace the stale #932 PR_POLICY_BODY template, keep the Supabase
identity checklist line commit-safe with an allowlist pragma, and teach
PR policy to accept trailing allowlist markers on checked items.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: add blank line before Notes in PR policy body
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: update PR #935 ledger row to merge tip
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* ci: sync checked governance preflight without secret strings
Use a PR_POLICY_BODY marker so CI injects checked Clinical Governance
items from trusted policy metadata, avoiding pragma/secret-scan clashes
with pull_request_target PR policy.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: refresh PR #935 ledger after main sync
Record the post-merge tip and local revalidation evidence for merge readiness.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix(ui): keep phone Mode layout gate hydration-safe
Initialize usesPhoneSearchLayout to false so SSR and the first client
paint match, then sync from matchMedia after mount and on Mode open.
Stops React #418 pageerrors on phone route-coverage journeys.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: record PR #935 hydration fix in review ledger
Capture the React #418 fix evidence and local Playwright revalidation.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: refresh PR #935 policy body after hydration fix
Keep Sync PR policy body accurate for merge-ready evidence.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* style: prettier-format Mode sheet hydration contract test
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: mark PR #935 exact-head CI green in review ledger
Record merge-ready hosted checks on 792142c; human approval still required.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: close CodeRabbit findings for PR policy and Python test
Remove PR-head GOVERNANCE_ALL_CHECKED self-attest, restore strict
checklist matching, harden the sync workflow guard, and exercise the
real unset PYTHON_BIN path in resolvePythonBin tests.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs: record CodeRabbit disposition for PR #935
Note closed review threads and local verification before merge.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
cursorBot pushed a commit that referenced this pull request Jul 26, 2026
Gate desktop composer portal adoption until page-owned slots mark
themselves ready after hydration, so hard-loads no longer inject a
display:contents host into still-unhydrated RSC HTML (React #418).
Update phone-scroll expectations for scroll-hide-only reserve transitions.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
cursorBot pushed a commit that referenced this pull request Jul 26, 2026
* fix: stop choppy screen resize when switching modes
Mode switches animated phone composer reserve because searchMode updated
before the pathname landed, briefly leaving isStandaloneModeHome false and
running the 200ms padding transition. Detect mode homes from pathname only,
navigate without optimistic mode state, and limit padding transitions to
scroll-hide.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test: align therapy-compass wiring with pathname mode-home gate
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs(ledger): record mode-switch lag same-class bug hunt
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: close same-class mode-switch layout thrash bugs
After the reserve-flip fix, related choppiness remained from eager
crossModeSearch chrome updates, inherited phone scroll/hide across mode
homes, a hero-portal null gap while slots rebound, a taller mode-home
loading skeleton, and services/forms contentAlign jumping after registry
load. Navigate out of the dashboard without rewriting chrome, reset
scroll-hide on pathname change, keep the default composer until the
portal attaches, align the skeleton to the shell header token, and keep
loading homes top-aligned on phone.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs(ledger): record mode-switch thrash review fixes
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: satisfy lint for mode-switch scroll and portal cleanup
Reset bottom-composer hidden state during render on pathname change
instead of setState-in-effect, and drop the unused hero-portal fallback
flag now that the default composer stays mounted until the host attaches.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs(ledger): record mode-switch thrash lint closeout
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs(ledger): record frontend-architecture loading/nav review
Append review of mode/page loading and navigation architecture at HEAD
0ef62ff: P1 shell bundle + hydration blanking; residual remount/tools dual.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: reduce mode/page loading blanking and layout rework
Parallel loading review found hard-load blanking from ClientHydrationBoundary,
mismatched/missing mode-home loading skeletons, forms catalog in the client
chunk, ClinicalDashboard static weight on namespaced routes, sidebar column
animation on remount, forms query remounts, and document viewer remounts on
page flips. Paint RSC children immediately, align ModeHomeRouteLoading, wire
mode-home loading.tsx files, server-pass the default form slug, dynamic-import
ClinicalDashboard, gate sidebar transitions after mount, and stop unnecessary
remount keys.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* docs(ledger): record parallel loading behaviour review fixes
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* refactor: extract sidebar transition hook and private-scope URL helper
Keeps ClinicalDashboard inside the maintainability budget after the
loading-performance pass, and shares the remount-safe sidebar transition
gate with GlobalSearchShell.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test: allow DocumentViewer identity-only remount key
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test: align chrome contracts with pathname reset and gated padding
After merging main's cross-breakpoint scroll-hide wiring, update static
contracts for resetKey=pathname, and keep phone padding transitions gated
to scroll-hide only so mode switches still snap.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: clear CI hydration and phone-scroll failures
Gate desktop composer portal adoption until page-owned slots mark
themselves ready after hydration, so hard-loads no longer inject a
display:contents host into still-unhydrated RSC HTML (React #418).
Update phone-scroll expectations for scroll-hide-only reserve transitions.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* style: prettier-format portal ready-gate files
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: keep document searches dashboard-owned and animate reserve reveal
Treat /documents/search as in-shell for cross-mode sync, keep a short-lived reserve-transition marker through hide and reveal, omit readiness cards without a default slug, and preserve URL hashes when clearing private scope refs.
* fix: stop duplicate page-root testids from searchParams Suspense
Nesting route children inside the shell's useSearchParams Suspense left a
hidden Next streaming S: clone of forms/favourites/presentation roots under
CI load. Gate always-standalone paths off that boundary and bridge params
beside the shell body so mode-home RSC paint stays.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* style: prettier format DocumentViewer reserve-transition import
* docs: record babysit sweep ledger rows for #1241/#1248/#1254/#1257/#1253/#1255
* refactor: extract DocumentViewer/Dashboard helpers under budgets
Pull PDF viewer mode helpers and document chrome scroll wiring into
focused modules, and isolate the dashboard desktop result composer slot,
so maintainability no-growth budgets pass after the reserve-transition
and portal ready-gate work.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test: align desktop page-slot contract with extracted helper
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: satisfy hooks lint for searchParams Suspense bridge
Use useSyncExternalStore for the client-only gate and call the param
callback from layout effect deps instead of updating a ref during render.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: seed standalone submitted search params
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* test: stabilize phone-scroll and presentation page assertions
Drop the settled-bottom 0.24s reserve check (transition is short-lived on
data-reserve-transitioning), and scope differential presentation lookups to
the live shell scrollport so hidden Next streaming clones cannot fail strict
mode under CI load.
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* fix: narrow submitted search param seeding
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@BigSimmo@cursoragent