Merge pull request #53 from Pho86/adjust_grids

Adjust grids
Pho86 · May 25, 2024 · 202593c · 202593c
2 parents 3ea3334 + 8a0198c
commit 202593c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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} />