cleanup

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}
+    />
+  );
 }