From a3d4427190f764d9c51456d81b42a9effd7f93c4 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 14:15:09 +1000
Subject: [PATCH] ComparisonTable: un-stick the info card so it scrolls with
 columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The top-left "Package Comparison" info card was sticky-left, originally
to mirror the row-label column. On horizontal scroll it pinned over the
leftmost package column — which after D040 is the recommended one —
hiding its badge and CTA.

Drop the sticky positioning on the info card; let it scroll naturally
with the package headers. The row-label column below stays sticky on
its own, so scanning "Allowance for Coffin" etc. while scrolling right
still works. Removed the now-unused Z_HEADER_ROW constant.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../ComparisonTable/ComparisonTable.tsx          | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/organisms/ComparisonTable/ComparisonTable.tsx b/src/components/organisms/ComparisonTable/ComparisonTable.tsx
index bb629b0..4e0d62f 100644
--- a/src/components/organisms/ComparisonTable/ComparisonTable.tsx
+++ b/src/components/organisms/ComparisonTable/ComparisonTable.tsx
@@ -281,7 +281,6 @@ const tableSx = {
 export const COMPARISON_TABLE_COL_WIDTH = 300;
 
 /** z-index scale for sticky layers inside the table. */
-const Z_HEADER_ROW = 30;
 const Z_STICKY_LEFT = 20;
 const Z_STICKY_LEFT_SECTION = 25; // section heading left cell above body cells
 
@@ -326,16 +325,11 @@ export const ComparisonTable = React.forwardRef<HTMLDivElement, ComparisonTableP
             pt: 3, // Room for floating verified badges
           }}
         >
-          {/* Info card — sticky-left, matches the row-label column below */}
-          <Box
-            sx={{
-              position: 'sticky',
-              left: 0,
-              zIndex: Z_HEADER_ROW,
-              bgcolor: 'background.default',
-              px: 2,
-            }}
-          >
+          {/* Info card — scrolls with the package columns. Previously
+              sticky-left to mirror the row-label column, but that pinned
+              it over the leftmost (recommended) package on horizontal
+              scroll. The row labels below stay sticky on their own. */}
+          <Box sx={{ px: 2 }}>
             <Card
               role="columnheader"
               variant="elevated"