ComparisonTable: un-stick the info card so it scrolls with columns
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>
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user