From 3e039d34c213c4e63cbf0065deadaa90db8fdb09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 26 Apr 2026 19:31:16 -0500
Subject: [PATCH] feat: grid sizing

---
 packages/website-ue/src/components/BaseStyles.astro           | 2 +-
 packages/website-ue/src/components/TankCard/index.module.css  | 4 +++-
 packages/website-ue/src/components/TankCards/index.module.css | 2 +-
 packages/website-ue/src/pages/[...locale]/tanks/_index.tsx    | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 180907903..523e77438 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -82,6 +82,6 @@ import "@fontsource-variable/roboto-flex";
     --duration-brief: 200ms;
     --duration-subtle: 2s;
 
-    --tank-card-width: 11rem;
+    /* --tank-card-width: 11rem; */
   }
 </style>
diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
index 58086af37..42075099b 100644
--- a/packages/website-ue/src/components/TankCard/index.module.css
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-4);
+  gap: var(--space-2);
 
   overflow: hidden;
   min-width: min-content;
@@ -10,6 +10,8 @@
   .icon-wrapper {
     position: relative;
 
+    width: 100%;
+
     .flag {
       position: absolute;
       top: 0;
diff --git a/packages/website-ue/src/components/TankCards/index.module.css b/packages/website-ue/src/components/TankCards/index.module.css
index c547572c0..bc4358201 100644
--- a/packages/website-ue/src/components/TankCards/index.module.css
+++ b/packages/website-ue/src/components/TankCards/index.module.css
@@ -1,6 +1,6 @@
 .tank-cards {
   display: grid;
   gap: var(--space-5) var(--space-4);
-  grid-template-columns: repeat(auto-fill, var(--tank-card-width));
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
   justify-content: center;
 }
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
index 4e571972c..ca908035d 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
@@ -21,7 +21,7 @@ function Content() {
 
   return (
     <TankCards>
-      {tankList.list.map(({ id }) => (
+      {tankList.list.slice(0, 32).map(({ id }) => (
         <TankCard key={id} id={id} />
       ))}
     </TankCards>