From faa618fa2d5d24874582cb419787a53673a04ab0 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Tue, 28 Jul 2026 09:24:55 +0800
Subject: [PATCH 02/22] fix(ui): remediate final layout audit findings
This addresses the remaining items in the CSS layout audit: removing ad-hoc z-index drift in headers/viewers, establishing semantic CSS variables for rigid viewport widths, and applying off-screen content-visibility constraints to heavy search result nodes.
---
src/app/globals.css | 8 ++++++--
.../clinical-dashboard/document-search-results.tsx | 2 ++
.../clinical-dashboard/master-search-header.tsx | 2 +-
src/components/document-viewer/pdf-canvas-viewer.tsx | 2 +-
4 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 65bf0ce780..33459a7155 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -117,6 +117,10 @@
/* Theme tokens */
:root {
+ /* Layout constraints */
+ --content-max-width: 1440px;
+ --rail-width: 480px;
+
/* Stacking Context Tokens (W3C Stacking Engine Standard) */
--z-negative: -1;
--z-elevated: 1;
@@ -1743,7 +1747,7 @@ summary::-webkit-details-marker {
beside the main column. */
.document-viewer-composer.floating-composer-edge {
left: max(2rem, var(--safe-area-left));
- right: calc(max(0px, (100vw - 1440px) / 2) + 480px + 3.5rem + var(--safe-area-right));
+ right: calc(max(0px, (100vw - var(--content-max-width)) / 2) + var(--rail-width) + 3.5rem + var(--safe-area-right));
}
}
@@ -1966,7 +1970,7 @@ summary::-webkit-details-marker {
--pwa-notice-bottom-gap: calc(max(0.75rem, var(--safe-area-bottom)) + 5.5rem);
position: fixed;
- z-index: 95;
+ z-index: var(--z-toast);
left: max(0.75rem, var(--safe-area-left));
right: max(0.75rem, var(--safe-area-right));
bottom: var(--pwa-notice-bottom-gap);
diff --git a/src/components/clinical-dashboard/document-search-results.tsx b/src/components/clinical-dashboard/document-search-results.tsx
index 2aa050fa9e..f5eef7ffdc 100644
--- a/src/components/clinical-dashboard/document-search-results.tsx
+++ b/src/components/clinical-dashboard/document-search-results.tsx
@@ -685,6 +685,7 @@ function SearchRecordResults({
data-testid={`${copy.testIdPrefix}-result-${service.slug}`}
className={cn(
sourceCard,
+ "content-visibility-auto",
"grid gap-3 p-3 shadow-[var(--shadow-tight)] transition hover:border-[color:var(--clinical-accent-border)] sm:p-4",
index === 0 && "ring-1 ring-[color:var(--clinical-accent)]/15",
)}
@@ -1024,6 +1025,7 @@ function DocumentSearchResultsPanelImpl({
key={document.document_id}
className={cn(
sourceCard,
+ "content-visibility-auto",
"relative overflow-visible p-0 shadow-[var(--shadow-tight)] transition hover:border-[color:var(--clinical-accent-border)] hover:shadow-[var(--shadow-hover)]",
selected &&
"border-[color:var(--clinical-accent-border)] ring-1 ring-[color:var(--clinical-accent)]/20",
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 1487bd43a2..35904ca52d 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -1765,7 +1765,7 @@ export function MasterSearchHeader({
if (nextFocusedElement instanceof Node && event.currentTarget.contains(nextFocusedElement)) return;
setModeMenuOpen(false);
}}
- className={cn("relative z-[60] min-w-0", isWorkflowHeader ? "justify-self-start" : "justify-self-center")}
+ className={cn("relative z-modal min-w-0", isWorkflowHeader ? "justify-self-start" : "justify-self-center")}
>