richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ComparisonTable: un-stick the info card so it scrolls with columns

Browse Source 
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:
Richie
2026-04-23 14:15:09 +10:00
parent 65e34eef4b
commit a3d4427190
1 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/organisms/ComparisonTable/ComparisonTable.tsx
View File

@@ -281,7 +281,6 @@ const tableSx = {
export const COMPARISON_TABLE_COL_WIDTH = 300; export const COMPARISON_TABLE_COL_WIDTH = 300;
/** z-index scale for sticky layers inside the table. */ /** z-index scale for sticky layers inside the table. */
const Z_HEADER_ROW = 30;
const Z_STICKY_LEFT = 20; const Z_STICKY_LEFT = 20;
const Z_STICKY_LEFT_SECTION = 25; // section heading left cell above body cells 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 pt: 3, // Room for floating verified badges
}} }}
> >
{/* Info card — sticky-left, matches the row-label column below */} {/* Info card — scrolls with the package columns. Previously
<Box sticky-left to mirror the row-label column, but that pinned
sx={{ it over the leftmost (recommended) package on horizontal
position: 'sticky', scroll. The row labels below stay sticky on their own. */}
left: 0, <Box sx={{ px: 2 }}>
zIndex: Z_HEADER_ROW,
bgcolor: 'background.default',
px: 2,
}}
>
<Card <Card
role="columnheader" role="columnheader"
variant="elevated" variant="elevated"