Fix differential badge design for mobile search results#418
Merged
Conversation
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
BigSimmo
enabled auto-merge (squash)
July 9, 2026 03:44
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
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".
auto-merge was automatically disabled
July 9, 2026 04:09
Head branch was modified
BigSimmo
enabled auto-merge (squash)
July 9, 2026 04:09
cursor
Bot
force-pushed
the
cursor/differential-badges-main-d3de
branch
from
July 9, 2026 04:10
c2e9273 to
5d8bf23
Compare
BigSimmo
disabled auto-merge
July 9, 2026 04:14
BigSimmo
enabled auto-merge (squash)
July 9, 2026 04:17
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
Bot
force-pushed
the
cursor/differential-badges-main-d3de
branch
from
July 9, 2026 04:22
5d8bf23 to
a695951
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.