From e1f5485eb223d67eb06a820facf9a7fb4d17b83b Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 11 Jul 2026 04:07:48 +0000 Subject: [PATCH 1/4] fix(home): centre mode homes, unclip composer dropdown, tighten hero scale - Dashboard mode homes (Answer, Documents, Medication) now keep a viewport-height floor from the sm breakpoint up, so the hero block is vertically centred like the standalone services/forms/differentials homes instead of hugging the header with a large dead area below. - The content wrapper uses overflow-x-clip instead of overflow-x-hidden: hidden made it a scroll container (overflow-y computed to auto), which cut the composer's command dropdown off mid-panel and rendered a phantom inner scrollbar next to the content column. - The command dropdown is explicitly text-left (it sits inside the centred mode-home template and inherited text-center headings) and its downward list is capped to the viewport (max-h min(42dvh, 24rem)). - Shared mode-home template is tighter and consistent across every mode: smaller hero icon tile (sm 3.5rem), heading sm:text-3xl / lg:text-4xl, compact action cards (sm min-height 6.25rem, 2.75rem icon tiles), reduced section gaps, and a narrower hero composer slot. - Updated the mobile hero-sizing guard to the new compact scale (2.75rem icon, 1.5rem heading). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MYqvyoocDtvjiicK6GoLYJ --- src/app/globals.css | 4 +-- src/components/ClinicalDashboard.tsx | 10 ++++-- .../universal-search-command-surface.tsx | 6 ++-- src/components/mode-home-template.tsx | 32 +++++++++---------- tests/ui-tools.spec.ts | 8 ++--- 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index a12083ec1..d81b27404 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1306,7 +1306,7 @@ summary::-webkit-details-marker { @media (min-width: 640px) { .mode-home-composer-slot { - width: min(100%, clamp(28rem, 74vw, 54rem)); + width: min(100%, clamp(28rem, 70vw, 48rem)); max-width: calc(100vw - 3rem - var(--safe-area-left) - var(--safe-area-right)); } @@ -1518,7 +1518,7 @@ summary::-webkit-details-marker { @media (min-width: 1024px) { .mode-home-composer-slot { - width: min(100%, clamp(36rem, 56vw, 56rem)); + width: min(100%, clamp(34rem, 50vw, 48rem)); } .universal-top-search-edge { diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx index 23400f575..468840797 100644 --- a/src/components/ClinicalDashboard.tsx +++ b/src/components/ClinicalDashboard.tsx @@ -3267,7 +3267,10 @@ export function ClinicalDashboard({