From 7dc40af1efd282f3103e313934230670ccad2507 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Sun, 12 Jul 2026 02:34:12 +0800 Subject: [PATCH 1/2] feat(mode-home): fluid hero heading + tokenized sizing across breakpoints Perfect the mode-home hero sizing (Home / services / forms / differentials / favourites / applications) with hybrid-fluid typography: - add fluid `--text-hero` clamp() token so the display heading scales smoothly ~23px->34px with no breakpoint jumps; floor pinned to 1.45rem to preserve the 390px hero-metrics baseline - collapse ModeHomeHero's dual sizing mechanism: remove the dead `compact` prop (all three consumers passed it) for clean mobile-first stepped icon/gaps plus the fluid heading - replace off-scale one-off text sizes (subtitle, card title/description) with named scale tokens; clears the last arbitrary text-[...] so check:type-scale --strict is clean repo-wide - align the loading skeleton to the refactored hero to remove load-time layout shift (max-w 64rem->60rem, icon/heading/composer dimensions) Verify: typecheck, lint, check:type-scale --strict, 1648 unit tests, and the chromium mode-home hero tests green; visual capture 320-1280 confirms smooth scaling with no horizontal overflow. Co-Authored-By: Claude Opus 4.8 --- src/app/globals.css | 8 ++++ src/components/applications-launcher-page.tsx | 1 - .../clinical-dashboard/favourites-hub.tsx | 1 - src/components/mode-home-page-skeleton.tsx | 8 ++-- src/components/mode-home-template.tsx | 43 ++++++------------- 5 files changed, 26 insertions(+), 35 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9a4cb8040..d748d43c0 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -69,6 +69,14 @@ --text-2xl-minus: 1.375rem; --text-3xl-minus: 1.625rem; + /* Fluid display heading for the hero / mode-home titles (hybrid-fluid type: + the large display heading scales continuously; body / UI text stays on the + stepped scale above). The floor is deliberately 1.45rem so the phone + baseline (23.2px at ≤~393px) is unchanged, then it ramps to the 2.15rem cap + by ~1033px — no breakpoint jumps. Generates the `text-hero` utility. + clamp() font sizes are not flagged by scripts/check-type-scale.mjs. */ + --text-hero: clamp(1.45rem, 1.02rem + 1.75vw, 2.15rem); + /* Font families: bind Tailwind's font-sans / font-mono to the loaded Geist faces (variables set on by next/font). font-mono is used for clinical codes and IDs (guideline refs, chunk/page numbers, versions). */ diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx index 446c2a73b..a8eab39f6 100644 --- a/src/components/applications-launcher-page.tsx +++ b/src/components/applications-launcher-page.tsx @@ -754,7 +754,6 @@ export function ApplicationsLauncherWorkspace({ subtitle={copy.description} icon={Grid2X2} headingLevel={1} - compact /> {desktopComposerSlotId ? ( diff --git a/src/components/clinical-dashboard/favourites-hub.tsx b/src/components/clinical-dashboard/favourites-hub.tsx index 57236b9ca..2c4c9dcc9 100644 --- a/src/components/clinical-dashboard/favourites-hub.tsx +++ b/src/components/clinical-dashboard/favourites-hub.tsx @@ -166,7 +166,6 @@ export function FavouritesHub({ subtitle="Notes, sources, medication pages, and clinical sets, ready to reuse." icon={Heart} headingLevel={headingLevel} - compact /> {desktopComposerSlotId ? ( diff --git a/src/components/mode-home-page-skeleton.tsx b/src/components/mode-home-page-skeleton.tsx index da198de22..3e04065a3 100644 --- a/src/components/mode-home-page-skeleton.tsx +++ b/src/components/mode-home-page-skeleton.tsx @@ -12,16 +12,16 @@ function SkeletonBlock({ className }: { className?: string }) { export function ModeHomePageSkeleton() { return (
- +
- +
- +
diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx index d727696a5..70ada88ea 100644 --- a/src/components/mode-home-template.tsx +++ b/src/components/mode-home-template.tsx @@ -57,51 +57,36 @@ export function ModeHomeHero({ subtitle, icon: Icon, headingLevel = 1, - compact = false, }: { testId?: string; title: string; subtitle: string; icon: LucideIcon; headingLevel?: 1 | 2; - /** - * Mobile-only tightening used by ModeHomeTemplate so short mode homes fit a - * phone viewport without scrolling. All sm+/lg values are identical to the - * default treatment, so tablet and desktop render exactly the same. - */ - compact?: boolean; }) { const Heading = headingLevel === 1 ? "h1" : "h2"; + // Sizing is a single mobile-first system: the icon and gaps step up sm→lg, + // and the display heading scales continuously via the fluid `text-hero` token + // (globals.css) so it never jumps at a breakpoint. The compact-only mobile + // tightening that short mode homes relied on is now the base treatment, so the + // hero still fits a phone viewport without scrolling. return (
- -