feat: sticky tank cards

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { Flex } from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { StickyTableRoot } from '../../../../components/StickyTableRoot';
+import { BodyLoader } from './BodyLoader';
+import { Header } from './Header';
+import { Tanks } from './Tanks';
+
+export function TankTable() {
+  return (
+    <Flex justify="center">
+      <StickyTableRoot variant="surface" style={{ maxWidth: '100%' }}>
+        <Header />
+        <Suspense fallback={<BodyLoader />}>
+          <Tanks />
+        </Suspense>
+      </StickyTableRoot>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/page.tsx

@@ -1,27 +1,14 @@
-import { Flex, Table } from '@radix-ui/themes';
-import { Suspense } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { FilterControl } from '../tankopedia/components/FilterControl';
-import { BodyLoader } from './components/BodyLoader';
-import { Header } from './components/Header';
 import { Info } from './components/Info';
-import { Tanks } from './components/Tanks';
+import { TankTable } from './components/Table';
 
 export default function Page() {
   return (
     <PageWrapper color="jade" noMaxWidth>
       <Info />
-
       <FilterControl />
-
+      <TankTable />
-      <Flex justify="center">
-        <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
-          <Header />
-          <Suspense fallback={<BodyLoader />}>
-            <Tanks />
-          </Suspense>
-        </Table.Root>
-      </Flex>
     </PageWrapper>
   );
 }

src/components/StickyTableRoot.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Table } from '@radix-ui/themes';
+import { RootProps } from '@radix-ui/themes/dist/cjs/components/table';
+import { useEffect, useRef } from 'react';
+
+export function StickyTableRoot(props: RootProps) {
+  const table = useRef<HTMLTableElement>(null);
+
+  useEffect(() => {
+    table.current
+      ?.querySelector('table')
+      ?.style.setProperty('overflow', 'auto');
+  }, []);
+
+  return <Table.Root {...props} ref={table} />;
+}

src/components/TankRowHeaderCell.tsx

@@ -13,7 +13,14 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   const Icon = classIcons[tank.class];
 
   return (
-    <Table.RowHeaderCell style={{ display: 'flex' }}>
+    <Table.RowHeaderCell
+      style={{
+        display: 'flex',
+        position: 'sticky',
+        left: 0,
+        backgroundColor: 'var(--color-background)',
+      }}
+    >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img
           alt={tank.name}