From b57ea864103486d5462f70ecad4b09146d88f3a7 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 22:40:06 +0800
Subject: [PATCH 1/3] fix(differentials): shape the detail tab focus ring and
 firm up action taps

Rebuilt on top of #483's redesigned interactive detail page (which already fixed
the wrapping action labels and tab-label wrap). Remaining polish:

- Add a .focus-ring-tab class (inset rounded ring: outline-offset -4px, no halo)
  so keyboard focus no longer draws a full-height box that collides with the
  tablist border; inactive tabs get a transparent bottom border to remove the
  2px layout jump on tab switch.
- Keep #483's roving-tabindex keyboard nav, nowrap and flex-1 layout intact.
- shrink-0 on the desktop action cluster so the Save icon button stops being
  crushed below 44px at ~1024px; nowrap on the Compare button.
- Bump the two overlap-diagnosis chips to the 44px tap standard.
- Regression test: detail Save action >=44px at 1024px, Overview tab single-line
  with no page overflow at 320px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/globals.css                           | 11 +++++
 .../differential-detail-page.tsx              | 14 +++---
 tests/ui-tools.spec.ts                        | 44 +++++++++++++++++++
 3 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9c06a4ddb..9a4cb8040 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1799,6 +1799,17 @@ summary::-webkit-details-marker {
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent) !important;
   }
 
+  /* Underline-tab focus: an inset rounded ring that hugs the label instead of the
+     default full-height box, which collides with the tablist border. */
+  .focus-ring-tab {
+    border-radius: var(--radius-md);
+  }
+  .focus-ring-tab:focus-visible {
+    outline: 2px solid var(--focus) !important;
+    outline-offset: -4px !important;
+    box-shadow: none !important;
+  }
+
   /* Premium hover transitions for source capsules */
   .source-capsule-hover {
     transition:
diff --git a/src/components/differentials/differential-detail-page.tsx b/src/components/differentials/differential-detail-page.tsx
index cd595a6f4..f22bb6210 100644
--- a/src/components/differentials/differential-detail-page.tsx
+++ b/src/components/differentials/differential-detail-page.tsx
@@ -160,13 +160,13 @@ function SectionItems({
               {slug ? (
                 <Link
                   href={`/differentials/diagnoses/${slug}`}
-                  className="inline-flex min-h-9 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)] hover:border-[color:var(--clinical-accent)]"
+                  className="inline-flex min-h-11 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)] hover:border-[color:var(--clinical-accent)]"
                 >
                   {item}
                   <ChevronRight className="h-3.5 w-3.5" aria-hidden />
                 </Link>
               ) : (
-                <span className="inline-flex min-h-9 items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2.5 text-xs font-semibold text-[color:var(--text-muted)]">
+                <span className="inline-flex min-h-11 items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2.5 text-xs font-semibold text-[color:var(--text-muted)]">
                   {item}
                 </span>
               )}
@@ -714,11 +714,11 @@ function TopActions({
   onCompare: () => void;
 }) {
   return (
-    <div className="hidden items-center gap-3 lg:flex">
+    <div className="hidden shrink-0 items-center gap-3 lg:flex">
       <button
         type="button"
         onClick={onCompare}
-        className="inline-flex min-h-11 items-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface)] px-4 text-sm font-bold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] hover:bg-[color:var(--surface-subtle)]"
+        className="inline-flex min-h-11 items-center gap-2 whitespace-nowrap rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface)] px-4 text-sm font-bold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] hover:bg-[color:var(--surface-subtle)]"
       >
         <GitCompareArrows className="h-4 w-4" aria-hidden />
         Compare
@@ -886,10 +886,10 @@ function Tabs({
             tabIndex={isActive ? 0 : -1}
             onClick={() => onChange(tab.id)}
             className={cn(
-              "min-h-11 flex-1 whitespace-nowrap px-1 py-3 text-center text-xs sm:flex-none sm:px-4 sm:text-sm",
+              "focus-ring-tab min-h-11 flex-1 whitespace-nowrap border-b-2 px-1 py-3 text-center text-xs sm:flex-none sm:px-4 sm:text-sm",
               isActive
-                ? "border-b-2 border-[color:var(--clinical-accent)] text-[color:var(--clinical-accent)]"
-                : "hover:text-[color:var(--text-heading)]",
+                ? "border-[color:var(--clinical-accent)] text-[color:var(--clinical-accent)]"
+                : "border-transparent hover:text-[color:var(--text-heading)]",
             )}
           >
             {tab.label}
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 4e2224f4c..639f3846f 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -1263,6 +1263,50 @@ test.describe("Clinical KB tools launcher", () => {
     await expectNoPageHorizontalOverflow(page);
   });
 
+  test("diagnosis detail actions stay tappable and tabs stay single-line", async ({ page }) => {
+    await page.setViewportSize({ width: 1024, height: 800 });
+    await gotoLauncher(page, "/differentials/diagnoses/delirium");
+    await expect(page.getByTestId("differential-detail-page")).toBeVisible();
+    // The desktop action cluster must keep its intrinsic width (shrink-0) so the
+    // icon action does not get crushed below the 44px tap standard.
+    await expectMinTouchTarget(page.getByRole("button", { name: "Save diagnosis" }));
+
+    // Tabs: no page overflow and single-line labels at the narrowest width.
+    await page.setViewportSize({ width: 320, height: 700 });
+    await expect(page.getByTestId("differential-detail-page")).toBeVisible();
+    await expectNoPageHorizontalOverflow(page);
+    const overviewTab = page.getByRole("tab", { name: "Overview" });
+    await expect(overviewTab).toBeVisible();
+    // Count rendered label lines from text-node rects (an icon rect would bridge
+    // two wrapped lines and mask a wrap); the tab label must stay on one line.
+    const overviewLineCount = await overviewTab.evaluate((element) => {
+      const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+      const rects: DOMRect[] = [];
+      while (walker.nextNode()) {
+        const node = walker.currentNode;
+        if (!(node.textContent ?? "").trim()) continue;
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        for (const rect of range.getClientRects()) {
+          if (rect.height > 4 && rect.width > 1) rects.push(rect);
+        }
+      }
+      rects.sort((a, b) => a.top - b.top);
+      let lines = 0;
+      let lineBottom = Number.NEGATIVE_INFINITY;
+      for (const rect of rects) {
+        if (rect.top >= lineBottom - 4) {
+          lines += 1;
+          lineBottom = rect.bottom;
+        } else {
+          lineBottom = Math.max(lineBottom, rect.bottom);
+        }
+      }
+      return lines;
+    });
+    expect(overviewLineCount).toBe(1);
+  });
+
   test("differentials presentation comparison page stays wired to differentials mode", async ({ page }) => {
     await page.setViewportSize({ width: 1440, height: 920 });
     const workflow = acuteConfusionPresentationWorkflow;

From a52e89e76375b8e25385c6d9dc6ae6fdbf1ed460 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 22:40:23 +0800
Subject: [PATCH 2/3] fix(ui): click-ring artifact and sub-44px tap targets
 across production routes

Still-present defects confirmed by a fresh sweep of current main (15 routes x 7
widths); none were addressed by recent main changes:

- DocumentTagCloud: drop the focus: ring classes that painted a ring on mouse
  click; the global :focus-visible rule keeps the keyboard ring.
- applications launcher category filters: mobile 28px / desktop 36px -> 44px,
  with whitespace-nowrap.
- service detail Copy row buttons: 40px -> 44px.
- favourites command-library More-actions buttons and library sidebar rows and
  compact toggle: 36px -> 44px.

Deliberately left main's intentional lg:min-h-9 desktop density on the mode-home
quick-link pills (AA-compliant for pointer).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/DocumentTagCloud.tsx                           | 3 +--
 src/components/applications-launcher-page.tsx                 | 4 ++--
 .../clinical-dashboard/favourites-command-library-page.tsx    | 2 +-
 src/components/clinical-dashboard/favourites-library-nav.tsx  | 4 ++--
 src/components/services/service-detail-page.tsx               | 2 +-
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/DocumentTagCloud.tsx b/src/components/DocumentTagCloud.tsx
index 8f8069809..b3ce99a1e 100644
--- a/src/components/DocumentTagCloud.tsx
+++ b/src/components/DocumentTagCloud.tsx
@@ -71,8 +71,7 @@ function DocumentTagChip({
     groupToneClass(tag.group),
     tag.queryMatched && "ring-2 ring-[color:var(--focus)]/25",
     selected && "ring-2 ring-[color:var(--primary)]/35",
-    onTagClick &&
-      "cursor-pointer transition hover:-translate-y-0.5 hover:border-[color:var(--border-strong)] focus:outline-none focus:ring-2 focus:ring-[color:var(--focus)]/40",
+    onTagClick && "cursor-pointer transition hover:-translate-y-0.5 hover:border-[color:var(--border-strong)]",
   );
   const content = (
     <>
diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx
index 239489f16..3af9807e4 100644
--- a/src/components/applications-launcher-page.tsx
+++ b/src/components/applications-launcher-page.tsx
@@ -343,7 +343,7 @@ function FilterTabs({
               aria-controls="launcher-results-panel"
               onClick={() => onFilterChange(filter.id)}
               className={cn(
-                "inline-flex min-h-9 items-center justify-center rounded-lg border px-4 text-xs font-bold transition",
+                "inline-flex min-h-11 items-center justify-center whitespace-nowrap rounded-lg border px-4 text-xs font-bold transition",
                 active
                   ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]"
                   : "border-[color:var(--border)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)]",
@@ -368,7 +368,7 @@ function FilterTabs({
               aria-controls="launcher-results-panel"
               onClick={() => onFilterChange(filter.id)}
               className={cn(
-                "inline-flex min-h-7 shrink-0 items-center justify-center gap-0.5 rounded-lg border px-2 text-4xs font-bold transition",
+                "inline-flex min-h-11 shrink-0 items-center justify-center gap-0.5 whitespace-nowrap rounded-lg border px-2 text-4xs font-bold transition",
                 active
                   ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]"
                   : "border-[color:var(--border)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)]",
diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx
index cd68a125d..0cfb03fbe 100644
--- a/src/components/clinical-dashboard/favourites-command-library-page.tsx
+++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx
@@ -386,7 +386,7 @@ function RowActionsMenu({ item }: { item: FavouriteItem }) {
         aria-label={`More actions for ${item.title}`}
         onClick={() => setOpen((current) => !current)}
         className={cn(
-          "grid h-9 w-9 place-items-center rounded-lg text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
+          "grid h-11 w-11 place-items-center rounded-lg text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
           focusRing,
         )}
       >
diff --git a/src/components/clinical-dashboard/favourites-library-nav.tsx b/src/components/clinical-dashboard/favourites-library-nav.tsx
index 2c62b51fb..c6ec59429 100644
--- a/src/components/clinical-dashboard/favourites-library-nav.tsx
+++ b/src/components/clinical-dashboard/favourites-library-nav.tsx
@@ -210,7 +210,7 @@ function SidebarRow({ entry }: { entry: SidebarEntry }) {
       aria-pressed={entry.active}
       onClick={entry.onClick}
       className={cn(
-        "flex min-h-9 w-full items-center gap-2.5 rounded-lg border px-2.5 text-left text-sm-minus font-semibold transition",
+        "flex min-h-11 w-full items-center gap-2.5 rounded-lg border px-2.5 text-left text-sm-minus font-semibold transition",
         entry.active
           ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[inset_2px_0_0_var(--clinical-accent)]"
           : "border-transparent text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]",
@@ -302,7 +302,7 @@ export function FavouritesSidebar({
           type="button"
           onClick={() => onCollapsedChange(true)}
           className={cn(
-            "grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-transparent text-[color:var(--text-muted)] transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface)] hover:text-[color:var(--text)]",
+            "grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-transparent text-[color:var(--text-muted)] transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface)] hover:text-[color:var(--text)]",
             focusRing,
           )}
           aria-label="Compact library sidebar"
diff --git a/src/components/services/service-detail-page.tsx b/src/components/services/service-detail-page.tsx
index 36d7074ea..1ef3fadbe 100644
--- a/src/components/services/service-detail-page.tsx
+++ b/src/components/services/service-detail-page.tsx
@@ -315,7 +315,7 @@ function ReferralTable({
                 disabled={!hasText(row.value)}
                 onClick={() => onCopy(row.value, `${row.label} copied`)}
                 aria-label={`Copy ${row.label}`}
-                className="inline-grid h-10 w-10 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-40"
+                className="inline-grid h-11 w-11 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <Copy className="h-4 w-4" aria-hidden />
               </button>

From 619dd99845beb02aa93f30377011b89d70fcb814 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 23:37:11 +0800
Subject: [PATCH 3/3] fix(medication): use per-prompt action descriptions on
 the prescribing home
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The MedicationHome actions hardcoded description: "Prescribing-focused search."
for every prompt, ignoring the authored `medicationPrompts[].description` values
("Check renal dosing…", "Review opioid-use…", "Check maximum dose…") that the
prescribing-home responsive test asserts. Restore `description: prompt.description`
so each card shows its specific guidance and the advisory UI regression passes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../clinical-dashboard/medication-prescribing-workspace.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
index 58213e866..c02e3cee1 100644
--- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
+++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
@@ -207,7 +207,7 @@ function MedicationHome({
       actionsLabel="Medication prompts"
       actions={medicationPrompts.map((prompt) => ({
         title: prompt.label,
-        description: "Prescribing-focused search.",
+        description: prompt.description,
         icon: prompt.icon,
         onClick: () => onSuggestedSearch(prompt.label),
         disabled: loading,