feat: sticky headers

src/components/StickyColumnHeaderCell.tsx

@@ -0,0 +1,20 @@
+import { Table } from '@radix-ui/themes';
+import { ColumnHeaderCellProps } from '@radix-ui/themes/dist/cjs/components/table';
+
+export function StickyColumnHeaderCell({
+  style,
+  ...props
+}: ColumnHeaderCellProps) {
+  return (
+    <Table.ColumnHeaderCell
+      style={{
+        position: 'sticky',
+        top: 0,
+        background: 'var(--gray-3)',
+        zIndex: 1,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

src/components/StickyRowHeaderCell.tsx

@@ -8,7 +8,6 @@ export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
         position: 'sticky',
         left: 0,
         backgroundColor: 'var(--color-panel)',
-        boxShadow: 'var(--shadow-6)',
         ...style,
       }}
       {...props}

src/components/TankRowHeaderCell.tsx

@@ -14,14 +14,8 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
 
   return (
     <StickyRowHeaderCell
-      maxWidth={{
-        initial: '180px',
-        sm: '240px',
-      }}
-      style={{
-        overflow: 'hidden',
-        display: 'flex',
-      }}
+      maxWidth={{ initial: '144px', sm: '240px' }}
+      style={{ overflow: 'hidden', display: 'flex' }}
     >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img
@@ -58,14 +52,12 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}
+        size={{ initial: '1', sm: '2' }}
       >
         <Icon
           width="1em"
           height="1em"
-          style={{
-            minWidth: '1em',
-            minHeight: '1em',
-          }}
+          style={{ minWidth: '1em', minHeight: '1em' }}
         />
 
         {tank.name}