feat: some cleanup

packages/website/src/components/TankRowHeaderCell.tsx

@@ -1,4 +1,5 @@
 import { type TankDefinition, tankIcon, TankType } from "@blitzkit/core";
+import { Box, Flex } from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
 import { classIcons } from "./ClassIcon";
 import { ExperimentIcon } from "./ExperimentIcon";
@@ -15,20 +16,6 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
 
   return (
     <StickyRowHeaderCell style={{ overflow: "hidden" }}>
-      <LinkI18n locale={locale} href={`/tanks/${tank.slug}`} tabIndex={-1}>
-        <img
-          alt={unwrap(tank.name)}
-          draggable={false}
-          src={tankIcon(tank.id)}
-          style={{
-            margin: "calc(-1 * var(--table-cell-padding)) 0",
-            height: "calc(100% + 2 * var(--table-cell-padding))",
-            aspectRatio: "4 / 3",
-            objectFit: "cover",
-          }}
-        />
-      </LinkI18n>
-
       <LinkI18n
         locale={locale}
         color={
@@ -42,28 +29,34 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
         underline="hover"
         wrap="nowrap"
         href={`/tanks/${tank.slug}`}
-        style={{
-          paddingLeft: "var(--space-2)",
-          display: "flex",
-          alignItems: "center",
-          gap: "var(--space-1)",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-        }}
+        style={{ height: "100%" }}
         size={{ initial: "1", sm: "2" }}
       >
-        <Icon
-          width="1em"
-          height="1em"
-          style={{ minWidth: "1em", minHeight: "1em" }}
-        />
+        <Flex height="100%" align="center" gap="1">
+          <Box
+            draggable={false}
+            height="calc(100% + 2 * var(--table-cell-padding))"
+            style={{
+              aspectRatio: "4 / 3",
+              backgroundImage: `url(${tankIcon(tank.id)})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+            }}
+          />
 
-        {tank.testing && (
-          <ExperimentIcon style={{ width: "1em", height: "1em" }} />
-        )}
+          <Icon
+            width="1em"
+            height="1em"
+            style={{ minWidth: "1em", minHeight: "1em" }}
+          />
 
-        {unwrap(tank.name)}
+          {tank.testing && (
+            <ExperimentIcon style={{ width: "1em", height: "1em" }} />
+          )}
+
+          {unwrap(tank.name)}
+        </Flex>
       </LinkI18n>
     </StickyRowHeaderCell>
   );