From a222c82d092c92098ac4818dfda4194847ea87f3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 9 Jul 2026 03:46:35 +0000
Subject: [PATCH] fix(ui): cross-mode strip follow-ups from ticker review

- Remove duplicate CrossModeLinksSection below answer (keep inline in surface)
- Scope rail fade and hidden scrollbar to md+ only
- Add list semantics and keyboard focus hint when multiple matches
- Drop unused compact prop on CrossModeLinkActions
- Assert single cross-mode strip in answer surface smoke test

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/app/globals.css                            | 18 ++++++++++--------
 src/components/ClinicalDashboard.tsx           |  3 ---
 .../clinical-dashboard/cross-mode-links.tsx    | 10 ++++++----
 tests/ui-smoke.spec.ts                         |  1 +
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 850ef7d05..03deee517 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1340,15 +1340,17 @@ summary::-webkit-details-marker {
   display: none;
 }
 
-.cross-mode-links-rail {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
-  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
-}
+@media (min-width: 768px) {
+  .cross-mode-links-rail {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
+    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
+  }
 
-.cross-mode-links-rail::-webkit-scrollbar {
-  display: none;
+  .cross-mode-links-rail::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .answer-suggestion-chip {
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index 46c9f3b1f..5ee16227c 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -3502,9 +3502,6 @@ export function ClinicalDashboard({
 
               {showSystemNotice && answer ? renderSystemNotice("sm:hidden") : null}
 
-              {activeModeResultKind === "answer" && answer && (
-                <CrossModeLinksSection queries={crossModeQueries} onModeSearch={handleCrossModeSearch} />
-              )}
               {activeModeResultKind === "answer" && answer && (
                 <RelatedDocumentsPanel
                   documents={relatedDocuments}
diff --git a/src/components/clinical-dashboard/cross-mode-links.tsx b/src/components/clinical-dashboard/cross-mode-links.tsx
index 6467025fc..0030ad7e5 100644
--- a/src/components/clinical-dashboard/cross-mode-links.tsx
+++ b/src/components/clinical-dashboard/cross-mode-links.tsx
@@ -64,15 +64,13 @@ function CrossModeLinkActions({
   link,
   query,
   onModeSearch,
-  compact = false,
 }: {
   link: CrossModeLink;
   query: string;
   onModeSearch: (mode: AppModeId, query: string) => void;
-  compact?: boolean;
 }) {
   return (
-    <div className={cn("flex flex-wrap items-center gap-2", compact ? "pt-1" : "pt-0.5")}>
+    <div className="flex flex-wrap items-center gap-2 pt-1">
       <Link
         href={link.detailHref}
         onClick={() => logCrossModeLinkOpen(query, link)}
@@ -102,6 +100,7 @@ function CrossModeLinkActions({
 function CrossModeLinkCard({ link, Icon, query, onModeSearch }: CrossModeLinkCardProps) {
   return (
     <article
+      role="listitem"
       className={cn(
         sourceCard,
         "flex shrink-0 flex-col gap-2 p-3",
@@ -129,7 +128,7 @@ function CrossModeLinkCard({ link, Icon, query, onModeSearch }: CrossModeLinkCar
           <CrossModeLinkBadges badges={link.badges} />
         </div>
       </div>
-      <CrossModeLinkActions link={link} query={query} onModeSearch={onModeSearch} compact />
+      <CrossModeLinkActions link={link} query={query} onModeSearch={onModeSearch} />
     </article>
   );
 }
@@ -220,6 +219,9 @@ export function CrossModeLinksStrip({
       </p>
 
       <div
+        role="list"
+        tabIndex={links.length > 1 ? 0 : undefined}
+        aria-label={links.length > 1 ? "Related library matches; scroll horizontally for more" : undefined}
         className="cross-mode-links-rail polished-scroll grid gap-2 overflow-x-auto overscroll-x-contain pb-1 md:flex md:w-max md:max-w-full md:gap-2.5"
         data-testid="cross-mode-links-rail"
       >
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index e695c7f68..9296d7830 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -1480,6 +1480,7 @@ test.describe("Clinical KB UI smoke coverage", () => {
     const answerSurface = page.locator('[data-dashboard-stage="answer-surface"]');
     const strip = answerSurface.getByTestId("cross-mode-links");
     await expect(strip).toBeVisible({ timeout: 15_000 });
+    await expect(answerSurface.getByTestId("cross-mode-links")).toHaveCount(1);
     const rail = strip.getByTestId("cross-mode-links-rail");
     await expect(rail).toBeVisible();
     await expect(rail).toHaveClass(/overflow-x-auto/);