From a689f69c1d430806b6bb16a333a9b5d036702886 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Mon, 13 Jul 2026 00:04:42 +0800
Subject: [PATCH 1/4] fix(responsive): resolve site-wide layout defects across
 all breakpoints

Site-wide responsive review driving every production route at 11 widths
(320-1536px + landscape) in Chromium, with page-overflow and internal-clip
probes plus visual triage. Fixes 7 layout defects:

- Answer follow-up composer was dragged ~186px off-screen across the entire
  640-1023px band in the submitted-answer view. Root cause: the composer was
  `sm:sticky` (top-docked) in that band, but the centering CSS is written for a
  `fixed` element, so translateX(-50%) pushed it off the left edge. Made the
  answer composer `fixed bottom-0` at all widths (bottom-docked, consistent with
  phone/desktop); the existing rail-aware centering rules handle it, so the
  earlier CSS workaround was reverted (globals.css unchanged). Desktop and phone
  layouts are unchanged; only the tablet band changes.
- DocumentViewer "Answer from this" button clipped at 320px: gate whitespace-nowrap
  to sm so it wraps on narrow phones.
- Service detail long status chip collapsed into a circle when its text wrapped:
  rounded-full -> rounded-2xl (still a pill when single-line).
- Tools/Applications list-row CTAs clipped at <=390px: nested single-column
  display:grid implicit auto columns weren't shrinking -> grid-cols-1.
- documents-source monitoring table cards + evidence header overflowed at 320px:
  responsive column/title sizing (sm: restores the desktop sizing).
- Differentials candidate-card title clipped a long word at 320px: break-words.

Verified: verify:cheap green, verify:ui exit 0, ui-tools+ui-overlap 57 passed,
zero horizontal overflow at any width.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/DocumentViewer.tsx                      |  2 +-
 src/components/applications-launcher-page.tsx          |  6 +++---
 .../clinical-dashboard/master-search-header.tsx        |  2 +-
 .../differential-presentation-workflow-page.tsx        |  2 +-
 src/components/master-document-flow-mockups.tsx        | 10 ++++++----
 src/components/services/service-detail-page.tsx        |  4 ++--
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 28a40eafdb..0e4e4eef21 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -1889,7 +1889,7 @@ function DocumentOverviewLanding({
               onClick={onAskFromDocument}
               disabled={!canSummarizeDocument}
               icon={Sparkles}
-              className={cn(secondaryButton, "min-h-12 whitespace-nowrap px-2 text-xs sm:text-sm")}
+              className={cn(secondaryButton, "min-h-12 px-2 text-xs sm:whitespace-nowrap sm:text-sm")}
             >
               Answer from this
             </DocumentActionButton>
diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx
index 446c2a73bd..4b2fea7093 100644
--- a/src/components/applications-launcher-page.tsx
+++ b/src/components/applications-launcher-page.tsx
@@ -785,7 +785,7 @@ export function ApplicationsLauncherWorkspace({
       <section
         aria-label={copy.allSectionLabel}
         data-testid="tools-all-tools"
-        className="mx-auto mt-8 grid max-w-[86rem] gap-4 sm:mt-10"
+        className="mx-auto mt-8 grid max-w-[86rem] grid-cols-1 gap-4 sm:mt-10"
       >
         <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div className="text-left">
@@ -801,7 +801,7 @@ export function ApplicationsLauncherWorkspace({
           </div>
         </div>
 
-        <div id="launcher-results-panel" role="tabpanel" aria-label={resultsPanelLabel} className="grid gap-4">
+        <div id="launcher-results-panel" role="tabpanel" aria-label={resultsPanelLabel} className="grid grid-cols-1 gap-4">
           {filteredApps.length === 0 ? (
             <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] px-4 py-10 text-center shadow-[var(--shadow-inset)]">
               <p className="text-sm font-extrabold text-[color:var(--text-heading)]">{copy.emptyTitle}</p>
@@ -814,7 +814,7 @@ export function ApplicationsLauncherWorkspace({
                   <ToolCard key={app.id} app={app} selected={effectiveSelectedId === app.id} onSelect={openTool} />
                 ))}
               </div>
-              <div className="grid gap-3 lg:hidden">
+              <div className="grid grid-cols-1 gap-3 lg:hidden">
                 {filteredApps.map((app) => (
                   <MobileToolRow key={app.id} app={app} selected={effectiveSelectedId === app.id} onSelect={openTool} />
                 ))}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 2510ebc563..50ebd81a73 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -1136,7 +1136,7 @@ export function MasterSearchHeader({
           isDesktopHomeComposer
             ? "universal-home-search-edge mx-auto w-full"
             : usesAnswerFooterStyle
-              ? "floating-composer-edge dashboard-composer-edge z-40 mx-auto max-w-3xl max-sm:fixed max-sm:bottom-0 sm:sticky sm:top-[calc(4.75rem+env(safe-area-inset-top))] sm:z-20 lg:fixed lg:bottom-0 lg:top-auto lg:max-w-4xl"
+              ? "floating-composer-edge dashboard-composer-edge fixed bottom-0 z-40 mx-auto max-w-3xl lg:max-w-4xl"
               : usesMobileBottomStyle
                 ? cn(
                     usesPhoneFooterDock
diff --git a/src/components/differentials/differential-presentation-workflow-page.tsx b/src/components/differentials/differential-presentation-workflow-page.tsx
index f84fb3dea5..5b9c59fe5d 100644
--- a/src/components/differentials/differential-presentation-workflow-page.tsx
+++ b/src/components/differentials/differential-presentation-workflow-page.tsx
@@ -474,7 +474,7 @@ function MobileCandidateCard({
         <span className="min-w-0">
           <span className="flex items-center gap-2">
             <CandidateGlyph record={candidate.record} className="h-4 w-4 shrink-0 text-[color:var(--text-muted)]" />
-            <span className="line-clamp-2 text-base font-extrabold leading-5 text-[color:var(--text-heading)]">
+            <span className="line-clamp-2 break-words text-base font-extrabold leading-5 text-[color:var(--text-heading)]">
               {candidate.record.title}
             </span>
           </span>
diff --git a/src/components/master-document-flow-mockups.tsx b/src/components/master-document-flow-mockups.tsx
index 6b7b822304..cc4972b653 100644
--- a/src/components/master-document-flow-mockups.tsx
+++ b/src/components/master-document-flow-mockups.tsx
@@ -473,7 +473,7 @@ function MonitoringRowCards({ compact = false }: { compact?: boolean }) {
         <article
           key={row[0]}
           className={cn(
-            "grid grid-cols-[4rem_minmax(0,1fr)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)]",
+            "grid grid-cols-[3rem_minmax(0,1fr)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] sm:grid-cols-[4rem_minmax(0,1fr)]",
             rowIndex === 1 && "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]",
           )}
         >
@@ -482,7 +482,7 @@ function MonitoringRowCards({ compact = false }: { compact?: boolean }) {
           </div>
           <div className={cn("p-3", compact && "p-2.5")}>
             <h3 className="text-base font-extrabold text-[color:var(--text-heading)]">{row[0]}</h3>
-            <dl className="mt-2 grid grid-cols-[7.25rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm">
+            <dl className="mt-2 grid grid-cols-[6rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm sm:grid-cols-[7.25rem_minmax(0,1fr)]">
               {monitoringTableHeadings.slice(1).map((heading, index) => (
                 <div key={heading} className="contents">
                   <dt className="font-bold text-[color:var(--text-muted)]">{heading}</dt>
@@ -1596,11 +1596,13 @@ function MasterEvidenceDetailContent({
             >
               <ArrowLeft className="h-6 w-6" aria-hidden="true" />
             </Link>
-            <h1 className="text-2xl font-extrabold text-[color:var(--text-heading)]">Evidence</h1>
+            <h1 className="shrink-0 text-lg font-extrabold text-[color:var(--text-heading)] sm:text-2xl">
+              Evidence
+            </h1>
             <Pill icon={evidenceTypeIconFor(evidence.type)}>
               {evidence.label} · p.{evidence.page}
             </Pill>
-            <div className="ml-auto">
+            <div className="ml-auto shrink-0">
               <IconButton label="More evidence actions" icon={MoreVertical} />
             </div>
           </div>
diff --git a/src/components/services/service-detail-page.tsx b/src/components/services/service-detail-page.tsx
index 98fe8c746b..0a164252a8 100644
--- a/src/components/services/service-detail-page.tsx
+++ b/src/components/services/service-detail-page.tsx
@@ -553,11 +553,11 @@ export function ServiceDetailPage({ service }: { service: ServiceRecord }) {
                         <span
                           key={chip.label ?? `status-chip-${index}`}
                           className={cn(
-                            "inline-flex min-h-6 items-center gap-1.5 rounded-full border px-2.5 text-2xs font-bold",
+                            "inline-flex min-h-6 items-center gap-1.5 rounded-2xl border px-2.5 py-0.5 text-2xs font-bold",
                             chipToneClass(chip.tone),
                           )}
                         >
-                          <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden />
+                          <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" aria-hidden />
                           {displayText(chip.label, "Status")}
                         </span>
                       ))}

From ff11093a2b3e7443d1403303586e1277d6f5bf22 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Mon, 13 Jul 2026 01:15:19 +0800
Subject: [PATCH 2/4] fix: prevent evidence header overflow

---
 src/components/master-document-flow-mockups.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/master-document-flow-mockups.tsx b/src/components/master-document-flow-mockups.tsx
index cc4972b653..9d2deb6471 100644
--- a/src/components/master-document-flow-mockups.tsx
+++ b/src/components/master-document-flow-mockups.tsx
@@ -296,11 +296,13 @@ function Pill({
   active = false,
   tone = "neutral",
   icon: Icon,
+  className,
 }: {
   children: ReactNode;
   active?: boolean;
   tone?: "neutral" | "teal" | "green" | "amber" | "blue" | "violet";
   icon?: LucideIcon;
+  className?: string;
 }) {
   const toneClass =
     active || tone === "teal"
@@ -319,6 +321,7 @@ function Pill({
       className={cn(
         "inline-flex min-h-7 max-w-full shrink-0 items-center gap-1.5 rounded-md border px-2.5 text-xs font-bold shadow-[var(--shadow-inset)]",
         toneClass,
+        className,
       )}
     >
       {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" /> : null}
@@ -1596,12 +1599,12 @@ function MasterEvidenceDetailContent({
             >
               <ArrowLeft className="h-6 w-6" aria-hidden="true" />
             </Link>
-            <h1 className="shrink-0 text-lg font-extrabold text-[color:var(--text-heading)] sm:text-2xl">
-              Evidence
-            </h1>
-            <Pill icon={evidenceTypeIconFor(evidence.type)}>
-              {evidence.label} · p.{evidence.page}
-            </Pill>
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              <h1 className="shrink-0 text-lg font-extrabold text-[color:var(--text-heading)] sm:text-2xl">Evidence</h1>
+              <Pill className="min-w-0 flex-1" icon={evidenceTypeIconFor(evidence.type)}>
+                {evidence.label} · p.{evidence.page}
+              </Pill>
+            </div>
             <div className="ml-auto shrink-0">
               <IconButton label="More evidence actions" icon={MoreVertical} />
             </div>

From dddf2a3b0185905ae909779c8fb126be61ec5696 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Mon, 13 Jul 2026 02:07:31 +0800
Subject: [PATCH 3/4] fix(responsive): revert redundant DocumentViewer nowrap
 tweak

main's action-button redesign already makes these buttons full-width, so gating
whitespace-nowrap to sm was dead code; DocumentViewer now matches main. The
evidence-header overflow is handled by the preceding autofix commit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/DocumentViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 947e63d8a9..aa9d1ccfb1 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -1909,7 +1909,7 @@ function DocumentOverviewLanding({
             onClick={onAskFromDocument}
             disabled={!canSummarizeDocument}
             icon={Sparkles}
-            className={cn(secondaryButton, "w-full min-h-12 px-2 text-xs sm:whitespace-nowrap sm:text-sm")}
+            className={cn(secondaryButton, "w-full min-h-12 whitespace-nowrap px-2 text-xs sm:text-sm")}
           >
             Answer from this
           </DocumentActionButton>

From cfee2595b6fccd9b419a4aa221a0b813e9b51dc3 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Mon, 13 Jul 2026 02:35:47 +0800
Subject: [PATCH 4/4] style: wrap launcher-results-panel attributes to satisfy
 prettier
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding grid-cols-1 pushed the div past the 120-char print width; prettier
wraps the JSX attributes. Pure formatting — the grid-cols-1 fix is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/applications-launcher-page.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx
index c35e0a0932..355c45fbb3 100644
--- a/src/components/applications-launcher-page.tsx
+++ b/src/components/applications-launcher-page.tsx
@@ -800,7 +800,12 @@ export function ApplicationsLauncherWorkspace({
           </div>
         </div>
 
-        <div id="launcher-results-panel" role="tabpanel" aria-label={resultsPanelLabel} className="grid grid-cols-1 gap-4">
+        <div
+          id="launcher-results-panel"
+          role="tabpanel"
+          aria-label={resultsPanelLabel}
+          className="grid grid-cols-1 gap-4"
+        >
           {filteredApps.length === 0 ? (
             <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] px-4 py-10 text-center shadow-[var(--shadow-inset)]">
               <p className="text-sm font-extrabold text-[color:var(--text-heading)]">{copy.emptyTitle}</p>