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; */ } 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 ( - {tankList.list.map(({ id }) => ( + {tankList.list.slice(0, 32).map(({ id }) => ( ))}