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 />
-
-      <Flex justify="center">
-        <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
-          <Header />
-          <Suspense fallback={<BodyLoader />}>
-            <Tanks />
-          </Suspense>
-        </Table.Root>
-      </Flex>
+      <TankTable />
     </PageWrapper>
   );
 }