feat: sticky tank cards

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}