cleanup

packages/website/src/components/TankCard/index.module.css

@@ -1,15 +1,43 @@
-.image-wrapper {
-  overflow: hidden;
+.wrapper {
+  --image-height: 6rem;
 
-  box-sizing: border-box;
+  &[data-compact="true"] {
+    --image-height: 4rem;
 
-  background-size: auto 100%;
-  background-repeat: no-repeat;
+    .image-wrapper {
+      background-size: auto 75%;
+    }
+  }
 
-  height: 6rem;
-}
+  .image-wrapper {
+    overflow: hidden;
 
-.icon {
-  width: 1em;
-  height: 1em;
+    box-sizing: border-box;
+
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+
+    height: var(--image-height);
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: var(--space-2);
+
+    .icon {
+      width: 1em;
+      height: 1em;
+      min-width: 1em;
+      min-height: 1em;
+    }
+
+    .text {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }

packages/website/src/components/TankCard/index.tsx

@@ -11,11 +11,12 @@ import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
 import { Text, type TextProps } from "../Text";
 import styles from "./index.module.css";
 
-type TankCardProps = TextProps & {
+type TankCardProps = {
   tank: TankDefinition;
   onTankSelect?: (tank: TankDefinition) => void;
   discriminator?: ReactNode;
   noLink?: boolean;
+  compact?: boolean;
 };
 
 const tankDefinitions = await api.tankDefinitions();
@@ -25,8 +26,7 @@ export const TankCard = ({
   discriminator,
   onTankSelect: onSelect,
   noLink,
-  style,
-  ...props
+  compact,
 }: TankCardProps) => {
   const { unwrap, locale } = useLocale();
 
@@ -45,6 +45,8 @@ export const TankCard = ({
 
   const content = (
     <Flex
+      className={styles.wrapper}
+      data-compact={compact}
       column
       gap="3"
       onClick={() => {
@@ -72,11 +74,9 @@ export const TankCard = ({
         />
       </Flex>
 
-      <Text color={color} lowContrast={lowContrast}>
-        <Flex align="center" gap="2" justify="center">
-          <Icon className={styles.icon} />
-          {name}
-        </Flex>
+      <Text className={styles.name} color={color} lowContrast={lowContrast}>
+        <Icon className={styles.icon} />
+        <span className={styles.text}>{name}</span>
       </Text>
 
       {discriminator && (