From 5e8939cddf547b694d1b7bf1225a5d25e42e904a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 28 Dec 2022 23:15:09 -0800
Subject: [PATCH 1/3] Make GridRep more consistent

The mainhand is still slightly taller than the 9 grid weapons but this will do for now
---
 components/GridRep/index.scss | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index f36667a1..0b18dffa 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -38,10 +38,6 @@
     aspect-ratio: 2/1;
     display: grid;
     grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
-    grid-template-rows: repeat(
-      3,
-      1fr
-    ); /* create 3 rows, each taking up 1 fraction */
     grid-gap: $unit; /* add a gap of 8px between grid items */
 
     .Weapon {
@@ -50,6 +46,8 @@
     }
 
     .Mainhand.Weapon {
+      aspect-ratio: 73/153;
+      display: grid;
       grid-column: 1 / 2; /* spans one column */
     }
 
@@ -67,7 +65,7 @@
     }
 
     .Grid.Weapon {
-      aspect-ratio: 160 / 92;
+      aspect-ratio: 280 / 160;
       display: grid;
     }
 
@@ -75,7 +73,6 @@
     .Grid.Weapon img[src*='jpg'] {
       border-radius: 4px;
       width: 100%;
-      height: 100%;
     }
   }
 

From 406b3c1b44cdc0875375a4cb3cb838ec71864500 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 28 Dec 2022 23:24:19 -0800
Subject: [PATCH 2/3] Fix GridRep sizing in GridCollection

---
 components/GridRepCollection/index.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.scss
index 8471bbd2..15fa7b3c 100644
--- a/components/GridRepCollection/index.scss
+++ b/components/GridRepCollection/index.scss
@@ -1,7 +1,7 @@
 .GridRepCollection {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   margin: 0 auto;
   padding: 0;
   transition: opacity 0.14s ease-in-out;
@@ -10,8 +10,7 @@
   max-width: 996px;
 
   @include breakpoint(tablet) {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    max-width: inherit;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   }
 
   @include breakpoint(phone) {

From d1ec67d0217b1246555d354ff130745f12e45c22 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 28 Dec 2022 23:39:54 -0800
Subject: [PATCH 3/3] Fix null element on GridRep

---
 components/GridRep/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index f1b2c6af..d58034f7 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -81,8 +81,12 @@ const GridRep = (props: Props) => {
     let url = ''
 
     if (mainhand) {
-      if (mainhand.element == 0 && props.grid[0] && props.grid[0].element) {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg`
+      const weapon = Object.values(props.grid).find(
+        (w) => w && w.object.id === mainhand.id
+      )
+
+      if (mainhand.element == 0 && weapon && weapon.element) {
+        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${weapon.element}.jpg`
       } else {
         url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg`
       }