cleanup

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

@@ -1,3 +1,7 @@
 .recent {
-  /* mt="2" mb="6" */
+  padding: var(--space-4);
+
+  background-color: var(--gray-a2);
+
+  border-radius: var(--space-3);
 }

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

@@ -6,7 +6,6 @@ import { TankFilters } from "../../stores/tankFilters";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
 import { Flex } from "../Flex";
-import { Separator } from "../Separator";
 import { TankCard } from "../TankCard";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { Text } from "../Text";
@@ -38,17 +37,16 @@ export function RecentlyViewedTanks() {
   }
 
   return (
-    <Flex column gap="2" className={styles.recent}>
-      <Text color="gray" align="center">
+    <Flex column gap="4" className={styles.recent}>
+      <Text color="gray" lowContrast>
         {strings.website.common.tank_search.recent}
       </Text>
-      <TankCardWrapper>
+
+      <TankCardWrapper compact>
         {recentlyViewed.map((id) => (
-          <TankCard tank={tankDefinitions.tanks[id]} key={id} />
+          <TankCard compact tank={tankDefinitions.tanks[id]} key={id} />
         ))}
       </TankCardWrapper>
-
-      <Separator />
     </Flex>
   );
 }

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 && (

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

@@ -1,8 +1,13 @@
 .wrapper {
+  --min-size: 12rem;
+
   display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
 
-  gap: var(--space-4);
-  row-gap: var(--space-5);
+  &[data-compact="true"] {
+    --min-size: 7rem;
 
-  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: var(--space-4);
+  }
 }

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

@@ -2,9 +2,16 @@ import type { ComponentProps } from "react";
 import { classNames } from "../../ui/classNames";
 import styles from "./index.module.css";
 
-export function TankCardWrapper({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return <div className={classNames(styles.wrapper, className)} {...props} />;
+interface Props extends ComponentProps<"div"> {
+  compact?: boolean;
+}
+
+export function TankCardWrapper({ className, compact, ...props }: Props) {
+  return (
+    <div
+      className={classNames(styles.wrapper, className)}
+      data-compact={compact}
+      {...props}
+    />
+  );
 }

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

@@ -1,4 +1,6 @@
-.tanks {
+.label {
+  margin: var(--space-4) 0;
+
   /* mt="2" gap="1" align="center" justify="center" direction="column" */
 
   .count {

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

@@ -441,7 +441,7 @@ export const TankSearch = memo<TankSearchProps>(
 
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
-        <div className={styles.tanks}>
+        <Flex justify="center" className={styles.label}>
           <div className={styles.count}>
             <Text lowContrast>
               {sorted.length === 1
@@ -486,7 +486,7 @@ export const TankSearch = memo<TankSearchProps>(
               , {tankopediaSort.direction}
             </Text>
           )}
-        </div>
+        </Flex>
 
         {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <div className={styles["test-warning"]}>