From 024483a64e79c4aa4072b9dbf495993944cdc851 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Thu, 2 Jul 2026 11:30:07 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(ui):=20design=20QA=20pass=20=E2=80=94?= =?UTF-8?q?=20dark=20mode=20on=20all=20routes,=20header=20overlap,=20token?= =?UTF-8?q?=20migration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Apply resolved theme before first paint via inline script in the root layout: standalone routes (/applications, /medications/*) never mounted useTheme so they always rendered light, and the dashboard flashed light before hydration for dark-theme users. - Fix header control pile-up at 640-1300px: the fixed-width mode pill overlapped the ledger and buried the "All sources" control. The pill now flexes inside its grid column and ledger counts / scope label / New chat text reveal at xl/2xl where they fit. Ledger items needed display moved from the unlayered globals.css class to call-site utilities so responsive hidden works. - Fix composer clear button overlapping typed text (unlayered .answer-footer-search-input beat the conditional pr-11); the button is now a flex sibling with a reserved 44px slot. - Replace text-white on the bright dark-theme clinical accent with the clinical-accent-contrast token (Launch buttons, mode icons, scope badge). - Migrate raw red/blue/amber/emerald palette classes in live surfaces to the semantic danger/info/warning/success tokens. - Keep dose-ceiling values on one line with tabular figures. Co-Authored-By: Claude Fable 5 --- src/app/globals.css | 6 ++-- src/app/layout.tsx | 9 ++++++ src/components/ClinicalDashboard.tsx | 2 +- src/components/applications-launcher-page.tsx | 8 ++--- .../master-search-header.tsx | 31 ++++++++++--------- .../medication-prescribing-workspace.tsx | 19 ++++++------ .../settings-search-mockup-page.tsx | 4 +-- 7 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 16b5ec8a39..44c009573e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,8 +9,7 @@ * * Radius usage rules: * rounded-md chips, inner elements, metadata pills - * rounded-lg controls, inputs, buttons - * rounded-lg cards, panels, drawers + * rounded-lg controls, inputs, buttons, cards, panels, drawers * rounded-xl bottom sheets, dialogs, large shells */ @theme { @@ -489,8 +488,9 @@ summary::-webkit-details-marker { letter-spacing: 0; } +/* Display is set by utilities at the call site (inline-flex / hidden xl:inline-flex) + so responsive hiding works; keep these rules display-free. */ .universal-header-ledger-item { - display: inline-flex; min-width: 0; align-items: center; gap: 0.35rem; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f8aec1acd6..27222d4768 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -47,6 +47,15 @@ export default function RootLayout({ suppressHydrationWarning > + {/* Applies the resolved theme before first paint on every route (standalone + pages don't mount useTheme, and hydration-time toggling flashes light). + Mirrors resolveThemePreference in src/lib/theme.ts: stored choice wins, + otherwise the OS preference. Key must match use-theme.ts. */} +