From 0cfd87b27803de7b31e71c62ff66dbdf7e316c01 Mon Sep 17 00:00:00 2001
From: Pho86 <philip03ho@gmail.com>
Date: Fri, 24 May 2024 20:57:03 -0700
Subject: [PATCH] adjust grids depending on size

---
 src/app/globals.scss         | 2 +-
 src/app/namecards/page.tsx   | 5 +----
 src/app/teambuilder/page.tsx | 4 ++--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/globals.scss b/src/app/globals.scss
index aba6916..95c5e44 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -69,7 +69,7 @@ table tr td {
 .grid-auto-fit-200 {
   display: grid;
   gap: 1.5em 1.2em;
-  grid-template-columns: repeat(auto-fit, minmax(8.2em, min-content));
+  grid-template-columns: repeat(auto-fit, minmax(8.2em, max-content));
   grid-auto-rows: minmax(min-content, max-content);
 
   @media (max-width: 768px) {
diff --git a/src/app/namecards/page.tsx b/src/app/namecards/page.tsx
index a60833e..871e143 100644
--- a/src/app/namecards/page.tsx
+++ b/src/app/namecards/page.tsx
@@ -32,11 +32,8 @@ export default function NamecardsPage() {
         <>
             <h1 className="text-3xl text-primary">Namecards List</h1>
             <section className="flex flex-col gap-8">
-                <div className="flex w-full justify-around gap-2 flex-col md:flex-row">
-
-                </div>
                 <div className="grid lg:grid-cols-2 gap-8">
-                    <div className="grid-auto-fit-200 md:grid-auto-fit-300 overflow-y-scroll p-2 max-h-[90dvh] ">
+                    <div className="grid-auto-fit-300 overflow-y-scroll p-2 max-h-[90dvh] ">
                         {nameCardData.length > 0 ? nameCardData.map((namecard: Namecard, index: number) => {
                             return <div key={index} className="">
                                 <div className={`flex w-full flex-col cursor-pointer items-center hover:scale-105 hover:shadow-light transition-all rounded-lg bg-[#efeeee] ${active && active.id == namecard.id && "shadow-light scale-105"}`} onClick={() => { setActive(namecard) }}>
diff --git a/src/app/teambuilder/page.tsx b/src/app/teambuilder/page.tsx
index 19b1552..631430f 100644
--- a/src/app/teambuilder/page.tsx
+++ b/src/app/teambuilder/page.tsx
@@ -176,7 +176,7 @@ export default function TeamBuilderPage() {
             <div className="flex flex-col gap-2 max-w-screen-2xl w-full">
                 <h1 className="text-3xl text-primary">Team Builder (Beta)</h1>
                 <div className="flex gap-3 justify-around flex-col md:flex-row">
-                    <div className="flex gap-3 justify-center ">
+                    <div className="flex gap-3 justify-center flex-wrap">
                         <IconButtonSwitch name="Pyro" onClick={() => { setActiveElement(activeElement === 1 ? 0 : 1) }} type="elements" index={1} active={activeElement} />
                         <IconButtonSwitch name="Hydro" onClick={() => { setActiveElement(activeElement === 2 ? 0 : 2) }} type="elements" index={2} active={activeElement} />
                         <IconButtonSwitch name="Anemo" onClick={() => { setActiveElement(activeElement === 3 ? 0 : 3) }} type="elements" index={3} active={activeElement} />
@@ -185,7 +185,7 @@ export default function TeamBuilderPage() {
                         <IconButtonSwitch name="Cryo" onClick={() => { setActiveElement(activeElement === 6 ? 0 : 6) }} type="elements" index={6} active={activeElement} />
                         <IconButtonSwitch name="Geo" onClick={() => { setActiveElement(activeElement === 7 ? 0 : 7) }} type="elements" index={7} active={activeElement} />
                     </div>
-                    <div className="flex gap-3 justify-center">
+                    <div className="flex gap-3 justify-center flex-wrap">
                         <IconButtonSwitch name="Bow" onClick={() => { setActiveWeapon(activeWeapon === 1 ? 0 : 1) }} index={1} active={activeWeapon} />
                         <IconButtonSwitch name="Sword" onClick={() => { setActiveWeapon(activeWeapon === 2 ? 0 : 2) }} index={2} active={activeWeapon} />
                         <IconButtonSwitch name="Polearm" onClick={() => { setActiveWeapon(activeWeapon === 3 ? 0 : 3) }} index={3} active={activeWeapon} />