Make Extra toggle only display on Weapons tab

src/components/PartySegmentedControl/index.scss

@@ -1,9 +1,10 @@
 .PartyNavigation {
     display: flex;
     gap: 58px;
-    justify-content: right;
+    justify-content: center;
     margin: 0 auto;
     max-width: 760px;
+    position: relative;
 }
 
 .Extra {
@@ -13,4 +14,6 @@
     gap: 8px;
     line-height: 34px;
     height: 100%;
+    position: absolute;
+    right: 0px;
 }

src/components/PartySegmentedControl/index.tsx

@@ -22,6 +22,17 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
+    const extraToggle =
+        <div className="Extra">
+            Extra
+            <ToggleSwitch 
+                name="Extra" 
+                editable={props.editable}
+                checked={props.extra}
+                onChange={props.onCheckboxChange} 
+            />
+        </div>
+
     return (
         <div className="PartyNavigation">
             <SegmentedControl>
@@ -54,15 +65,13 @@ const PartySegmentedControl = (props: Props) => {
                 >Summons</Segment>
             </SegmentedControl>
 
-            <div className="Extra">
+            {
-                Extra
+                (() => {
-                <ToggleSwitch 
+                    if (props.selectedTab == GridType.Weapon) {
-                    name="Extra" 
+                        return extraToggle
-                    editable={props.editable}
+                    }
-                    checked={props.extra}
+                })()
-                    onChange={props.onCheckboxChange} 
+            }
-                />
-            </div>
         </div>
     )
 }

src/components/ToggleSwitch/index.scss

@@ -4,6 +4,7 @@
   display: inline-block;
   position: relative;
   width: 58px;
+  height: 34px;
 
   &-checkbox {
     display: none;