Fix spacing

* Header menu width
* Width of weapon grid
* PartyDetails button

components/DropdownMenuContent/index.scss

@@ -11,8 +11,7 @@
   z-index: 15;
 
   @include breakpoint(phone) {
-    left: $unit-2x;
-    right: $unit-2x;
+    min-width: 50vw;
   }
 }
 

components/PartyDetails/index.scss

@@ -1,6 +1,7 @@
 .DetailsWrapper {
   display: flex;
   flex-direction: column;
+  gap: $unit-2x;
   margin: $unit-4x auto 0 auto;
   max-width: $grid-width;
 
@@ -293,13 +294,12 @@
     flex-direction: row;
     gap: $unit;
     margin: 0 auto;
-    margin-bottom: $unit * 2;
     max-width: $unit * 94;
     width: 100%;
 
     @include breakpoint(phone) {
       flex-direction: column;
-      gap: $unit-2x;
+      gap: $unit;
       padding: 0 $unit;
     }
 

components/PartyDetails/index.tsx

@@ -743,17 +743,17 @@ const PartyDetails = (props: Props) => {
               )}
             </div>
           </div>
-          <div className="Right">
-            {party.editable ? (
+          {party.editable ? (
+            <div className="Right">
               <Button
                 leftAccessoryIcon={<EditIcon />}
                 text={t('buttons.show_info')}
                 onClick={toggleDetails}
               />
-            ) : (
-              <div />
-            )}
-          </div>
+            </div>
+          ) : (
+            ''
+          )}
         </div>
         {readOnly}
         {editable}

components/WeaponGrid/index.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   justify-content: center;
 
+  @include breakpoint(phone) {
+    margin: 0 2px;
+  }
+
   #MainGrid {
     display: grid;
     gap: $unit-3x;