Fix spacing on WeaponGrid

components/weapon/WeaponGrid/index.scss

@@ -13,10 +13,7 @@
     gap: $unit-3x;
     grid-template-columns: 1.278fr 3fr;
     justify-items: center;
-    grid-template-areas:
+    grid-template-areas: 'mainhand grid';
-      'mainhand grid'
-      'mainhand grid'
-      'mainhand grid';
     max-width: $grid-width;
 
     @include breakpoint(tablet) {

components/weapon/WeaponGrid/index.tsx

@@ -375,28 +375,32 @@ const WeaponGrid = (props: Props) => {
     )
   })
 
-  const extraElement = (
+  const extraElement = () => {
-    <ExtraContainer>
+    if (appState.party.raid && appState.party.raid.group.extra) {
-      {appState.party.raid && appState.party.raid.group.extra && (
+      return (
-        <ExtraWeaponsGrid
+        <ExtraContainer>
-          grid={appState.grid.weapons.allWeapons}
+          {appState.party.raid && appState.party.raid.group.extra && (
-          editable={props.editable}
+            <ExtraWeaponsGrid
-          offset={numWeapons}
+              grid={appState.grid.weapons.allWeapons}
-          removeWeapon={removeWeapon}
+              editable={props.editable}
-          updateObject={receiveWeaponFromSearch}
+              offset={numWeapons}
-          updateUncap={initiateUncapUpdate}
+              removeWeapon={removeWeapon}
-        />
+              updateObject={receiveWeaponFromSearch}
-      )}
+              updateUncap={initiateUncapUpdate}
-      {appState.party.raid && appState.party.raid.group.guidebooks && (
+            />
-        <GuidebooksGrid
+          )}
-          grid={appState.party.guidebooks}
+          {appState.party.raid && appState.party.raid.group.guidebooks && (
-          editable={props.editable}
+            <GuidebooksGrid
-          removeGuidebook={removeGuidebook}
+              grid={appState.party.guidebooks}
-          updateObject={receiveGuidebookFromSearch}
+              editable={props.editable}
-        />
+              removeGuidebook={removeGuidebook}
-      )}
+              updateObject={receiveGuidebookFromSearch}
-    </ExtraContainer>
+            />
-  )
+          )}
+        </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>
   )
 }