Fix differential badge design for mobile search results - #418
Conversation
This pull request has been ignored for the connected project Preview Branches by Supabase. |
There was a problem hiding this comment.
💡 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".
Uh oh!
There was an error while loading. Please reload this page.
Head branch was modified
c2e9273 to
5d8bf23CompareRebased 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>
5d8bf23 to
a695951CompareUh oh!
There was an error while loading. Please reload this page.
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>
Capture the React #418 fix evidence and local Playwright revalidation. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
* 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>
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>
* 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>
Summary
Fixes two badge layout issues on the differentials mobile search results screen.
EMERGENT) — Pill shape, fixedh-6, solid danger fill, and status dot. Prevents uppercase text clipping on small screens (especially mobile Safari).All,Presentations,Diagnoses) — Horizontally scrollable flex row with split label/count pills, integrated with existingkindFilterstate, tablist semantics, 44px touch targets, and focus rings.Diff: 3 files against
main(includes dark-mode contrast follow-up).PR history
maincleanlyarchive/local-main-wip-20260705and showed a misleading ~13k-line diffcursor/differential-badges-main-d3derebased on currentmainChanges
src/components/clinical-dashboard/differentials-home.tsx—StatusBadgeredesign, newResultTypeTabscomponentsrc/app/globals.css— add--danger-solid/--danger-solid-contrasttokens for theme-safe solid danger fillstests/ui-tools.spec.ts— narrow-viewport (375px) regression testReview feedback addressed
--danger(text token) as a background fill in dark mode. It now uses dedicated--danger-solid/--danger-solid-contrasttokens that keep saturated red + white text in both themes.Verification
npm run format:check— passednpm run test:e2e:chromium -- tests/ui-tools.spec.ts -g "differentials search badges"— passed at 375px viewportClinical 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.