From fb99b3993bd00728a1ef9fb03f8c17e223ef0606 Mon Sep 17 00:00:00 2001
From: chriscrosstalk <49691103+chriscrosstalk@users.noreply.github.com>
Date: Tue, 28 Jul 2026 18:18:47 -0700
Subject: [PATCH] fix(drug-reference): responsive compare columns and dark-mode
 readability (#1163)

---
 .../drug-reference/DrugResultRow.tsx          | 10 ++---
 .../drug-reference/IngestStatus.tsx           | 24 ++++++------
 .../drug-reference/IngredientGroup.tsx        |  2 +-
 .../components/drug-reference/LabelBlocks.tsx |  6 +--
 admin/inertia/pages/drug-reference/index.tsx  | 14 +++----
 .../pages/drug-reference/interactions.tsx     | 39 +++++++++++--------
 admin/inertia/pages/drug-reference/show.tsx   | 10 ++---
 7 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/admin/inertia/components/drug-reference/DrugResultRow.tsx b/admin/inertia/components/drug-reference/DrugResultRow.tsx
index 16ca043..b16496a 100644
--- a/admin/inertia/components/drug-reference/DrugResultRow.tsx
+++ b/admin/inertia/components/drug-reference/DrugResultRow.tsx
@@ -47,11 +47,11 @@ export default function DrugResultRow({ result, brandFirst = false }: Props) {
   return (
     <Link
       href={`/drug-reference/${result.id}`}
-      className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors group"
+      className="flex items-center justify-between px-4 py-3 hover:bg-surface-secondary transition-colors group"
     >
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="font-semibold text-sm text-gray-900 group-hover:text-desert-green truncate">
+          <span className="font-semibold text-sm text-text-primary group-hover:text-desert-green truncate">
             {headline}
           </span>
 
@@ -67,14 +67,14 @@ export default function DrugResultRow({ result, brandFirst = false }: Props) {
           )}
 
           {result.labelCount > 1 && (
-            <span className="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600 flex-shrink-0">
+            <span className="px-1.5 py-0.5 rounded text-xs bg-surface-secondary text-text-secondary flex-shrink-0">
               {result.labelCount} labels
             </span>
           )}
         </div>
 
         {subParts.length > 0 && (
-          <div className="flex flex-wrap gap-x-3 mt-0.5 text-xs text-gray-500">
+          <div className="flex flex-wrap gap-x-3 mt-0.5 text-xs text-text-secondary">
             {subParts.map((p, i) => (
               <span key={i} className="truncate">
                 {p}
@@ -84,7 +84,7 @@ export default function DrugResultRow({ result, brandFirst = false }: Props) {
         )}
       </div>
 
-      <span className="ml-3 text-gray-400 text-xs flex-shrink-0">›</span>
+      <span className="ml-3 text-text-muted text-xs flex-shrink-0">›</span>
     </Link>
   )
 }
diff --git a/admin/inertia/components/drug-reference/IngestStatus.tsx b/admin/inertia/components/drug-reference/IngestStatus.tsx
index d9b9c62..251ec37 100644
--- a/admin/inertia/components/drug-reference/IngestStatus.tsx
+++ b/admin/inertia/components/drug-reference/IngestStatus.tsx
@@ -62,14 +62,14 @@ function PhaseBlock({
       ? 'text-green-700'
       : running
         ? accentRunning
-        : 'text-gray-500'
+        : 'text-text-secondary'
   const barColor = failed
     ? 'bg-red-500'
     : completed
       ? 'bg-green-500'
       : running
         ? accentRunning.replace('text-', 'bg-')
-        : 'bg-gray-300'
+        : 'bg-surface-elevated'
 
   return (
     <div className="space-y-1">
@@ -83,14 +83,14 @@ function PhaseBlock({
         )}
       </div>
 
-      <p className="text-xs text-gray-500">{explainer}</p>
+      <p className="text-xs text-text-secondary">{explainer}</p>
 
       {counterLeft && (
-        <div className="text-xs text-gray-600 tabular-nums">{counterLeft}</div>
+        <div className="text-xs text-text-secondary tabular-nums">{counterLeft}</div>
       )}
 
       {(running || completed || failed) && (
-        <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+        <div className="w-full bg-surface-elevated rounded-full h-2 overflow-hidden">
           <div
             className={`h-2 rounded-full transition-all duration-500 ${barColor}`}
             style={{ width: `${failed ? 100 : pct}%` }}
@@ -206,7 +206,7 @@ export default function IngestStatus({ status, onRefresh, pollIntervalMs = 3000
 
   const downloadTiming =
     status.phase === 'downloading' && elapsedMs !== null ? (
-      <div className="flex flex-wrap items-center gap-x-3 text-xs text-gray-500 tabular-nums">
+      <div className="flex flex-wrap items-center gap-x-3 text-xs text-text-secondary tabular-nums">
         <span>Elapsed {fmtDuration(elapsedMs)}</span>
         {dlBytes && <span>{dlBytes} this part</span>}
       </div>
@@ -214,11 +214,11 @@ export default function IngestStatus({ status, onRefresh, pollIntervalMs = 3000
 
   const ingestTiming =
     status.phase === 'ingesting' && elapsedMs !== null ? (
-      <div className="flex flex-wrap items-center gap-x-3 text-xs text-gray-500 tabular-nums">
+      <div className="flex flex-wrap items-center gap-x-3 text-xs text-text-secondary tabular-nums">
         <span>Elapsed {fmtDuration(elapsedMs)}</span>
         {etaMs !== null && (
           <span>
-            ~{fmtDuration(etaMs)} left <span className="text-gray-400">(estimate)</span>
+            ~{fmtDuration(etaMs)} left <span className="text-text-muted">(estimate)</span>
           </span>
         )}
       </div>
@@ -247,11 +247,11 @@ export default function IngestStatus({ status, onRefresh, pollIntervalMs = 3000
         counterLeft={
           ingest.state === 'running' || ingest.state === 'completed' ? (
             <span>
-              <span className="text-sm font-semibold text-gray-800">
+              <span className="text-sm font-semibold text-text-primary">
                 {ingest.records.toLocaleString()}
               </span>
               {expected > 0 && (
-                <span className="text-gray-400"> of ~{expected.toLocaleString()} labels</span>
+                <span className="text-text-muted"> of ~{expected.toLocaleString()} labels</span>
               )}
             </span>
           ) : undefined
@@ -262,7 +262,7 @@ export default function IngestStatus({ status, onRefresh, pollIntervalMs = 3000
 
       {/* Reassurance while busy */}
       {busy && (
-        <p className="text-xs text-gray-400">
+        <p className="text-xs text-text-muted">
           Runs in the background — you can leave this page and it keeps going. Search turns on
           automatically when ingest finishes.
         </p>
@@ -270,7 +270,7 @@ export default function IngestStatus({ status, onRefresh, pollIntervalMs = 3000
 
       {/* Ready footer */}
       {status.phase === 'ready' && status.lastUpdated && (
-        <p className="text-xs text-gray-500">FDA data version {status.lastUpdated}.</p>
+        <p className="text-xs text-text-secondary">FDA data version {status.lastUpdated}.</p>
       )}
     </div>
   )
diff --git a/admin/inertia/components/drug-reference/IngredientGroup.tsx b/admin/inertia/components/drug-reference/IngredientGroup.tsx
index 777a498..c3bc711 100644
--- a/admin/inertia/components/drug-reference/IngredientGroup.tsx
+++ b/admin/inertia/components/drug-reference/IngredientGroup.tsx
@@ -40,7 +40,7 @@ export default function IngredientGroup({
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}
-        className="flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-gray-50 transition-colors"
+        className="flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-surface-secondary transition-colors"
       >
         <IconChevronDown
           size={16}
diff --git a/admin/inertia/components/drug-reference/LabelBlocks.tsx b/admin/inertia/components/drug-reference/LabelBlocks.tsx
index f786af4..9110a49 100644
--- a/admin/inertia/components/drug-reference/LabelBlocks.tsx
+++ b/admin/inertia/components/drug-reference/LabelBlocks.tsx
@@ -16,7 +16,7 @@ export default function LabelBlocks({
 }) {
   const blocks = parseLabelSection(text)
   if (blocks.length === 0) return null
-  const bodyColor = tone === 'danger' ? 'text-red-800' : 'text-gray-800'
+  const bodyColor = tone === 'danger' ? 'text-red-800' : 'text-text-primary'
   return (
     <div className="space-y-3">
       {blocks.map((block, i) => (
@@ -39,7 +39,7 @@ function LabelBlockView({ block, bodyColor }: { block: LabelBlock; bodyColor: st
 
   if (isLabelSectionHeader(block.text)) {
     return (
-      <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+      <p className="text-xs font-semibold uppercase tracking-wide text-text-secondary">
         {block.text!.replace(/^\s*\d{1,2}\s+/, '')}
       </p>
     )
@@ -48,7 +48,7 @@ function LabelBlockView({ block, bodyColor }: { block: LabelBlock; bodyColor: st
   return (
     <p className={`text-sm ${bodyColor} leading-relaxed`}>
       {block.label && (
-        <span className="inline-block mr-1.5 px-1.5 py-0.5 rounded bg-gray-100 text-gray-600 text-xs font-semibold align-baseline">
+        <span className="inline-block mr-1.5 px-1.5 py-0.5 rounded bg-surface-secondary text-text-secondary text-xs font-semibold align-baseline">
           {block.label}
         </span>
       )}
diff --git a/admin/inertia/pages/drug-reference/index.tsx b/admin/inertia/pages/drug-reference/index.tsx
index e2c1351..3904ff1 100644
--- a/admin/inertia/pages/drug-reference/index.tsx
+++ b/admin/inertia/pages/drug-reference/index.tsx
@@ -547,7 +547,7 @@ export default function DrugReferenceIndex({
                   onChange={handleQueryChange}
                   autoFocus
                   placeholder="Search a medicine by name — ibuprofen, Benadryl, loratadine…"
-                  className="w-full rounded-lg border border-desert-stone-lighter bg-white py-2.5 pl-10 pr-4 text-sm text-desert-green-darker transition focus:border-desert-green focus:outline-none focus:ring-2 focus:ring-desert-green/20"
+                  className="w-full rounded-lg border border-desert-stone-lighter bg-surface-primary py-2.5 pl-10 pr-4 text-sm text-desert-green-darker transition focus:border-desert-green focus:outline-none focus:ring-2 focus:ring-desert-green/20"
                 />
               </div>
 
@@ -574,7 +574,7 @@ export default function DrugReferenceIndex({
                   <button
                     type="button"
                     onClick={() => setFiltersOpen((o) => !o)}
-                    className="ml-auto flex items-center gap-1 rounded-full border border-desert-stone-lighter bg-white px-3 py-1 text-xs text-desert-green-darker hover:border-desert-green"
+                    className="ml-auto flex items-center gap-1 rounded-full border border-desert-stone-lighter bg-surface-primary px-3 py-1 text-xs text-desert-green-darker hover:border-desert-green"
                   >
                     <IconAdjustmentsHorizontal size={14} />
                     {route ? ROUTE_FRIENDLY[route] : 'Form'} · {sort === 'name' ? 'A–Z' : 'Best match'}
@@ -588,7 +588,7 @@ export default function DrugReferenceIndex({
                       <select
                         value={route ?? ''}
                         onChange={(e) => handleRouteChange(e.target.value || null)}
-                        className="rounded-lg border border-desert-stone-lighter bg-white px-2 py-1 text-xs text-desert-green-darker focus:border-desert-green focus:outline-none"
+                        className="rounded-lg border border-desert-stone-lighter bg-surface-primary px-2 py-1 text-xs text-desert-green-darker focus:border-desert-green focus:outline-none"
                       >
                         <option value="">Any form</option>
                         {ROUTE_OPTIONS.map((r) => (
@@ -603,7 +603,7 @@ export default function DrugReferenceIndex({
                       <select
                         value={sort}
                         onChange={(e) => handleSortChange(e.target.value as 'relevance' | 'name')}
-                        className="rounded-lg border border-desert-stone-lighter bg-white px-2 py-1 text-xs text-desert-green-darker focus:border-desert-green focus:outline-none"
+                        className="rounded-lg border border-desert-stone-lighter bg-surface-primary px-2 py-1 text-xs text-desert-green-darker focus:border-desert-green focus:outline-none"
                       >
                         <option value="relevance">Best match</option>
                         <option value="name">A–Z</option>
@@ -704,7 +704,7 @@ export default function DrugReferenceIndex({
                 <button
                   type="button"
                   onClick={() => setBrowseOpen((o) => !o)}
-                  className="flex items-center gap-1 rounded-full border border-desert-stone-lighter bg-white px-3 py-1 text-xs text-desert-green-darker hover:border-desert-olive"
+                  className="flex items-center gap-1 rounded-full border border-desert-stone-lighter bg-surface-primary px-3 py-1 text-xs text-desert-green-darker hover:border-desert-olive"
                 >
                   <IconFirstAidKit size={14} />
                   {anySituationSelected ? 'Add another situation' : 'Pick one or more situations'}
@@ -729,7 +729,7 @@ export default function DrugReferenceIndex({
                                 className={`rounded-full border px-3 py-1 text-sm transition-colors ${
                                   active
                                     ? 'border-desert-olive bg-desert-olive text-white'
-                                    : 'border-desert-stone-lighter bg-white text-desert-green-darker hover:border-desert-olive hover:bg-desert-olive/5'
+                                    : 'border-desert-stone-lighter bg-surface-primary text-desert-green-darker hover:border-desert-olive hover:bg-desert-olive/5'
                                 }`}
                               >
                                 {c.label}
@@ -977,7 +977,7 @@ function FilterPill({
       type="button"
       onClick={onClick}
       className={`rounded-full border px-3 py-1 text-sm transition-colors ${
-        active ? activeClass : `border-desert-stone-lighter bg-white text-desert-green-darker ${hoverClass}`
+        active ? activeClass : `border-desert-stone-lighter bg-surface-primary text-desert-green-darker ${hoverClass}`
       }`}
     >
       {children}
diff --git a/admin/inertia/pages/drug-reference/interactions.tsx b/admin/inertia/pages/drug-reference/interactions.tsx
index ea72cca..c024165 100644
--- a/admin/inertia/pages/drug-reference/interactions.tsx
+++ b/admin/inertia/pages/drug-reference/interactions.tsx
@@ -154,7 +154,7 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
 
         {isEmpty ? (
           // ── Empty state (no data ingested) ─────────────────────────────────
-          <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+          <div className="border-2 border-dashed border-border-default rounded-lg p-8 text-center">
             <p className="text-lg font-semibold mb-2">No FDA drug data yet</p>
             <p className="mb-6 opacity-70">
               Download the openFDA drug-label dataset to enable offline search and comparison.
@@ -173,9 +173,9 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
         ) : (
           <>
             {/* ── Drug picker ───────────────────────────────────────────────── */}
-            <div className="mb-6 border border-gray-200 rounded-lg p-4 bg-gray-50">
+            <div className="mb-6 border border-border-subtle rounded-lg p-4 bg-surface-secondary">
               <div className="flex items-center justify-between mb-3">
-                <h2 className="text-sm font-semibold text-gray-700">Select drugs to compare</h2>
+                <h2 className="text-sm font-semibold text-text-primary">Select drugs to compare</h2>
                 {atMax && (
                   <span className="text-xs text-amber-700 bg-amber-100 border border-amber-200 rounded px-2 py-0.5">
                     Maximum {MAX_COMPARE} drugs reached
@@ -208,7 +208,7 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
                     .map((id) => (
                       <span
                         key={id}
-                        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-300 text-gray-600 animate-pulse"
+                        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-surface-elevated text-text-secondary animate-pulse"
                       >
                         #{id}
                         <button
@@ -231,21 +231,21 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
                 onChange={handleQueryChange}
                 placeholder="Search for a drug to add…"
                 disabled={atMax}
-                className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-desert-green disabled:bg-gray-100 disabled:text-gray-400"
+                className="w-full border border-border-default rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-desert-green disabled:bg-surface-secondary disabled:text-text-muted"
               />
 
               {/* Picker results */}
               {pickerLoading && (
-                <div className="mt-2 text-xs text-gray-500">Searching…</div>
+                <div className="mt-2 text-xs text-text-secondary">Searching…</div>
               )}
               {pickerError && (
                 <div className="mt-2 text-xs text-red-600">{pickerError}</div>
               )}
               {pickerSearched && pickerResults.length === 0 && !pickerLoading && (
-                <div className="mt-2 text-xs text-gray-500">No results for "{query}"</div>
+                <div className="mt-2 text-xs text-text-secondary">No results for "{query}"</div>
               )}
               {pickerResults.length > 0 && !atMax && (
-                <div className="mt-2 border border-gray-200 rounded-lg overflow-hidden divide-y divide-gray-200 max-h-64 overflow-y-auto bg-white">
+                <div className="mt-2 border border-border-subtle rounded-lg overflow-hidden divide-y divide-border-subtle max-h-64 overflow-y-auto bg-surface-primary">
                   {pickerResults.map((r) => (
                     <PickerRow
                       key={r.id}
@@ -260,19 +260,24 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
 
             {/* ── Comparison columns ────────────────────────────────────────── */}
             {selectedIds.length === 0 ? (
-              <div className="text-center py-12 text-gray-400 border-2 border-dashed border-gray-200 rounded-lg">
+              <div className="text-center py-12 text-text-muted border-2 border-dashed border-border-subtle rounded-lg">
                 <p className="text-sm">Select drugs above to compare their labeled interaction warnings.</p>
               </div>
             ) : loadingEntries ? (
-              <div className="text-center py-12 text-gray-400">
+              <div className="text-center py-12 text-text-muted">
                 <p className="text-sm">Loading…</p>
               </div>
             ) : (
-              // Stacked single-column on phones; fixed-min-width columns that
-              // scroll sideways (never crush) from sm: up, even at MAX_COMPARE.
+              // Stacked single-column on phones. From sm: up the columns share
+              // the available width instead of sitting at a fixed 15rem, so one
+              // selection reads full-width and two split it in half. Label text
+              // runs long (opioid interaction sections are hundreds of words),
+              // and a narrow column next to empty space made it near-unreadable.
+              // min-w-60 keeps the old width as a floor, so at MAX_COMPARE on a
+              // narrow viewport they still scroll sideways rather than crush.
               <div className="flex flex-col gap-3 sm:flex-row sm:gap-3 sm:overflow-x-auto sm:pb-2">
                 {entries.map((entry) => (
-                  <div key={entry.id} className="w-full sm:flex-none sm:w-60">
+                  <div key={entry.id} className="w-full sm:flex-1 sm:min-w-60">
                     <InteractionColumn entry={entry} onRemove={removeId} />
                   </div>
                 ))}
@@ -282,7 +287,7 @@ export default function DrugReferenceInteractions({ ingestStatus, rowCount }: Pa
         )}
 
         {/* ── Source citation (CC0, no-endorsement) ───────────────────────── */}
-        <footer className="mt-8 pt-4 border-t border-gray-200 text-xs text-gray-500">
+        <footer className="mt-8 pt-4 border-t border-border-subtle text-xs text-text-secondary">
           <strong>Source:</strong> U.S. Food &amp; Drug Administration drug labeling, via{' '}
           <strong>openFDA</strong> — public domain (CC0 1.0). NOMAD is not affiliated with or
           endorsed by the FDA. Label data is provided as-is; do not rely on it for medical
@@ -305,14 +310,14 @@ interface PickerRowProps {
 
 function PickerRow({ result, selected, onAdd }: PickerRowProps) {
   return (
-    <div className="flex items-center justify-between px-3 py-2 hover:bg-gray-50">
+    <div className="flex items-center justify-between px-3 py-2 hover:bg-surface-secondary">
       {/* Reuse the same visual pattern as DrugResultRow but without a Link */}
       <div className="min-w-0 flex-1 mr-3">
-        <span className="text-sm font-medium text-gray-900 block truncate">
+        <span className="text-sm font-medium text-text-primary block truncate">
           {result.brand_name ?? result.generic_name ?? 'Unknown'}
         </span>
         {result.brand_name && result.generic_name && (
-          <span className="text-xs text-gray-500 italic">{result.generic_name}</span>
+          <span className="text-xs text-text-secondary italic">{result.generic_name}</span>
         )}
       </div>
       {selected ? (
diff --git a/admin/inertia/pages/drug-reference/show.tsx b/admin/inertia/pages/drug-reference/show.tsx
index db33699..939e2c5 100644
--- a/admin/inertia/pages/drug-reference/show.tsx
+++ b/admin/inertia/pages/drug-reference/show.tsx
@@ -65,7 +65,7 @@ export default function DrugReferenceShow({ label, situations = [] }: PageProps)
           </div>
 
           {label.brand_name && label.generic_name && (
-            <p className="text-base text-gray-600 italic">{label.generic_name}</p>
+            <p className="text-base text-text-secondary italic">{label.generic_name}</p>
           )}
 
           <dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 text-sm">
@@ -132,7 +132,7 @@ export default function DrugReferenceShow({ label, situations = [] }: PageProps)
                 <Link
                   key={s.slug}
                   href={`/drug-reference?situation=${encodeURIComponent(s.slug)}`}
-                  className="rounded-full border border-desert-olive/40 bg-white px-3 py-1 text-sm text-desert-olive-dark transition-colors hover:border-desert-olive hover:bg-desert-olive hover:text-white"
+                  className="rounded-full border border-desert-olive/40 bg-surface-primary px-3 py-1 text-sm text-desert-olive-dark transition-colors hover:border-desert-olive hover:bg-desert-olive hover:text-white"
                 >
                   {s.label}
                 </Link>
@@ -176,7 +176,7 @@ export default function DrugReferenceShow({ label, situations = [] }: PageProps)
         )}
 
         {/* ── Footer citation ───────────────────────────────────────────────── */}
-        <footer className="mt-8 pt-4 border-t border-gray-200 text-xs text-gray-500 space-y-1">
+        <footer className="mt-8 pt-4 border-t border-border-subtle text-xs text-text-secondary space-y-1">
           <p>
             <strong>Source:</strong> U.S. Food &amp; Drug Administration drug labeling, via{' '}
             <strong>openFDA</strong> — public domain (CC0 1.0). NOMAD is not affiliated with or
@@ -209,10 +209,10 @@ function LabelSection({
 }) {
   return (
     <section className="mb-6">
-      <h2 className="text-base font-bold mb-2 border-b border-gray-200 pb-1">{title}</h2>
+      <h2 className="text-base font-bold mb-2 border-b border-border-subtle pb-1">{title}</h2>
       <LabelBlocks text={body} />
       {footnote && (
-        <p className="mt-2 text-xs text-gray-500 italic">{footnote}</p>
+        <p className="mt-2 text-xs text-text-secondary italic">{footnote}</p>
       )}
     </section>
   )