From 105c293544c70338e18842efbcdcc17826aec6c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 8 Oct 2026 17:34:20 +0200
Subject: [PATCH] Size the catalog row skeleton to the row, drop the sparkline
 focus stop

The catalog's loading rows were 6 px shorter than the loaded ones, so the
groups below moved when a probe landed. The decorative score sparklines
sit in an aria-hidden wrapper, and Recharts' accessibility layer put a
focusable surface inside it.
---
 src/app/insights/catalog/page.tsx                   | 6 ++++--
 src/components/insights/derived/delta-sparkline.tsx | 9 ++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/insights/catalog/page.tsx b/src/app/insights/catalog/page.tsx
index 5f050dee2..db106235c 100644
--- a/src/app/insights/catalog/page.tsx
+++ b/src/app/insights/catalog/page.tsx
@@ -122,8 +122,10 @@ function CatalogRowSkeleton() {
       data-slot="catalog-row-skeleton"
       className="flex items-start justify-between gap-3 py-2"
     >
-      <div className="min-w-0 flex-1 space-y-1.5">
-        <Skeleton className="h-4 w-32" />
+      {/* Sized to the loaded row (a 22 px name-and-badge line over a 16 px
+          source line), so the groups below do not move when it lands. */}
+      <div className="min-w-0 flex-1 space-y-1">
+        <Skeleton className="h-5.5 w-32" />
         <Skeleton className="h-3 w-48" />
       </div>
       <Skeleton className="h-8 w-20 shrink-0" />
diff --git a/src/components/insights/derived/delta-sparkline.tsx b/src/components/insights/derived/delta-sparkline.tsx
index 9736cbd67..2e7462786 100644
--- a/src/components/insights/derived/delta-sparkline.tsx
+++ b/src/components/insights/derived/delta-sparkline.tsx
@@ -62,7 +62,14 @@ export function DeltaSparkline({
   const hasComparison = data.some((point) => point.b !== undefined);
   return (
     <ResponsiveContainer width="100%" height="100%">
-      <AreaChart data={data} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+      {/* A sparkline is decoration inside an aria-hidden wrapper: without
+          the accessibility layer Recharts puts a focusable surface in it,
+          and a focus stop nobody can perceive is an axe failure. */}
+      <AreaChart
+        data={data}
+        margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
+        accessibilityLayer={false}
+      >
         <defs>
           <linearGradient id={fillId} x1="0" y1="0" x2="0" y2="1">
             <stop offset="0%" stopColor={strokeVar} stopOpacity={0.28} />