feat: smaller tank icons

src/components/TankRowHeaderCell.tsx

@@ -14,12 +14,15 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
 
   return (
     <Table.RowHeaderCell
+      maxWidth={{
+        initial: '180px',
+        sm: '240px',
+      }}
       style={{
         display: 'flex',
         position: 'sticky',
         left: 0,
         backgroundColor: 'var(--color-background)',
-        maxWidth: 240,
         overflow: 'hidden',
       }}
     >
@@ -31,7 +34,7 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           style={{
             margin: 'calc(-1 * var(--table-cell-padding)) 0',
             height: 'calc(100% + 2 * var(--table-cell-padding))',
-            aspectRatio: '16 / 9',
+            aspectRatio: '4 / 3',
             objectFit: 'cover',
           }}
         />

src/hooks/useIntersection.ts

@@ -17,14 +17,12 @@ export function useIntersection(
     const rect = ref.current.getBoundingClientRect();
     const visible = !(rect.bottom < 0 || rect.top - window.innerHeight >= 0);
 
-    if (visible) {
+    if (visible) callback();
-      callback();
-    } else {
-      observer.current = new IntersectionObserver(callback, options);
-      observer.current.observe(ref.current);
 
-      return () => observer.current!.disconnect();
+    observer.current = new IntersectionObserver(callback, options);
-    }
+    observer.current.observe(ref.current);
+
+    return () => observer.current!.disconnect();
   }, []);
 
   return observer;