feat: shadow sticky column

src/app/tools/tank-performance/components/Total.tsx

@@ -1,5 +1,6 @@
 import { Table } from '@radix-ui/themes';
 import { memo, useCallback } from 'react';
+import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell';
 import {
   AverageDefinitionsAllStats,
   AverageDefinitionsEntryWithId,
@@ -42,7 +43,7 @@ export const Total = memo<TotalProps>(
 
     return (
       <Table.Row>
-        <Table.RowHeaderCell>Total</Table.RowHeaderCell>
+        <StickyRowHeaderCell>Total</StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
         <Table.Cell align="center">
           {numberFormat.format(ratio * players)}

src/components/StickyRowHeaderCell.tsx

@@ -0,0 +1,17 @@
+import { Table } from '@radix-ui/themes';
+import { RowHeaderCellProps } from '@radix-ui/themes/dist/cjs/components/table';
+
+export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
+  return (
+    <Table.RowHeaderCell
+      style={{
+        position: 'sticky',
+        left: 0,
+        backgroundColor: 'var(--color-panel)',
+        boxShadow: 'var(--shadow-6)',
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

src/components/TankRowHeaderCell.tsx

@@ -1,9 +1,9 @@
-import { Table } from '@radix-ui/themes';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
 import { tankIcon } from '../core/blitzkit/tankIcon';
 import { classIcons } from './ClassIcon';
 import { Link } from './Link';
 import { ScienceIcon } from './ScienceIcon';
+import { StickyRowHeaderCell } from './StickyRowHeaderCell';
 
 interface TankRowHeaderCellProps {
   tank: TankDefinition;
@@ -13,17 +13,14 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   const Icon = classIcons[tank.class];
 
   return (
-    <Table.RowHeaderCell
+    <StickyRowHeaderCell
       maxWidth={{
         initial: '180px',
         sm: '240px',
       }}
       style={{
-        display: 'flex',
-        position: 'sticky',
-        left: 0,
-        backgroundColor: 'var(--color-background)',
         overflow: 'hidden',
+        display: 'flex',
       }}
     >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
@@ -77,6 +74,6 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           <ScienceIcon style={{ width: '1em', height: '1em' }} />
         )}
       </Link>
-    </Table.RowHeaderCell>
+    </StickyRowHeaderCell>
   );
 }