From 45645aa35276289e6e15c98e129659c2b681f109 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 18 Jun 2023 05:36:59 -0700
Subject: [PATCH] Fix spacing on WeaponGrid

---
 components/weapon/WeaponGrid/index.scss |  5 +--
 components/weapon/WeaponGrid/index.tsx  | 50 +++++++++++++------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/components/weapon/WeaponGrid/index.scss b/components/weapon/WeaponGrid/index.scss
index 8fec4f82..92324d01 100644
--- a/components/weapon/WeaponGrid/index.scss
+++ b/components/weapon/WeaponGrid/index.scss
@@ -13,10 +13,7 @@
     gap: $unit-3x;
     grid-template-columns: 1.278fr 3fr;
     justify-items: center;
-    grid-template-areas:
-      'mainhand grid'
-      'mainhand grid'
-      'mainhand grid';
+    grid-template-areas: 'mainhand grid';
     max-width: $grid-width;
 
     @include breakpoint(tablet) {
diff --git a/components/weapon/WeaponGrid/index.tsx b/components/weapon/WeaponGrid/index.tsx
index 6e1588e3..b27cb658 100644
--- a/components/weapon/WeaponGrid/index.tsx
+++ b/components/weapon/WeaponGrid/index.tsx
@@ -375,28 +375,32 @@ const WeaponGrid = (props: Props) => {
     )
   })
 
-  const extraElement = (
-    <ExtraContainer>
-      {appState.party.raid && appState.party.raid.group.extra && (
-        <ExtraWeaponsGrid
-          grid={appState.grid.weapons.allWeapons}
-          editable={props.editable}
-          offset={numWeapons}
-          removeWeapon={removeWeapon}
-          updateObject={receiveWeaponFromSearch}
-          updateUncap={initiateUncapUpdate}
-        />
-      )}
-      {appState.party.raid && appState.party.raid.group.guidebooks && (
-        <GuidebooksGrid
-          grid={appState.party.guidebooks}
-          editable={props.editable}
-          removeGuidebook={removeGuidebook}
-          updateObject={receiveGuidebookFromSearch}
-        />
-      )}
-    </ExtraContainer>
-  )
+  const extraElement = () => {
+    if (appState.party.raid && appState.party.raid.group.extra) {
+      return (
+        <ExtraContainer>
+          {appState.party.raid && appState.party.raid.group.extra && (
+            <ExtraWeaponsGrid
+              grid={appState.grid.weapons.allWeapons}
+              editable={props.editable}
+              offset={numWeapons}
+              removeWeapon={removeWeapon}
+              updateObject={receiveWeaponFromSearch}
+              updateUncap={initiateUncapUpdate}
+            />
+          )}
+          {appState.party.raid && appState.party.raid.group.guidebooks && (
+            <GuidebooksGrid
+              grid={appState.party.guidebooks}
+              editable={props.editable}
+              removeGuidebook={removeGuidebook}
+              updateObject={receiveGuidebookFromSearch}
+            />
+          )}
+        </ExtraContainer>
+      )
+    }
+  }
 
   const conflictModal = () => {
     return incoming && conflicts ? (
@@ -448,7 +452,7 @@ const WeaponGrid = (props: Props) => {
         <ul id="Weapons">{weaponGridElement}</ul>
       </div>
 
-      {displayExtraContainer ? extraElement : ''}
+      {displayExtraContainer ? extraElement() : ''}
     </div>
   )
 }