fix(responsive): resolve site-wide layout defects across all breakpoints

src/components/applications-launcher-page.tsx

@@ -784,7 +784,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">
@@ -800,7 +800,12 @@ 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>
@@ -813,7 +818,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} />
                 ))}

src/components/clinical-dashboard/master-search-header.tsx

@@ -1142,7 +1142,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

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>

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}
@@ -473,7 +476,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 +485,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 +1599,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>
-            <Pill icon={evidenceTypeIconFor(evidence.type)}>
-              {evidence.label} · p.{evidence.page}
-            </Pill>
-            <div className="ml-auto">
+            <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>
           </div>

src/components/services/service-detail-page.tsx

@@ -554,11 +554,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>
                       ))}