feat: grid sizing

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>

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;

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;
 }

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>