Another mobile hotfix

components/FilterBar/index.scss

@@ -1,10 +1,11 @@
 .FilterBar {
   align-items: center;
   background: var(--bar-bg);
-  border-radius: 6px;
+  border-radius: $card-corner;
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: $unit * 2;
+  gap: $unit-2x;
   margin: 0 auto;
   margin-top: 7px; // Line up with HeaderMenu
   padding: $unit * 2;
@@ -13,6 +14,26 @@
   top: $unit * 4;
   width: 966px;
 
+  @media (max-width: $tablet) {
+    position: static;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .Filters {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: row;
+    flex-grow: 1;
+    gap: $unit;
+    width: auto;
+
+    @media (max-width: $tablet) {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
   &.shadow {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
   }
@@ -41,6 +62,12 @@
     &:hover {
       background-color: var(--select-contained-bg-hover);
     }
+
+    @media (max-width: $tablet) {
+      width: 100%;
+      max-width: inherit;
+      text-align: center;
+    }
   }
 
   .SelectTrigger {

components/FilterBar/index.tsx

@@ -68,6 +68,7 @@ const FilterBar = (props: Props) => {
   return (
     <div className={classes}>
       {props.children}
+      <div className="Filters">
         <Select
           value={`${props.element}`}
           open={elementOpen}
@@ -139,6 +140,7 @@ const FilterBar = (props: Props) => {
           </SelectItem>
         </Select>
       </div>
+    </div>
   )
 }
 

components/PartyDetails/index.scss

@@ -84,6 +84,11 @@
         width: 60%;
         height: 60%;
 
+        @media (max-width: $tablet) {
+          width: 100%;
+          height: 100%;
+        }
+
         /* gradient */
         &::before {
           content: '';

components/PartySegmentedControl/index.scss

@@ -10,13 +10,16 @@
 
   @media (max-width: $phone) {
     gap: $unit;
-    justify-content: flex-start;
     margin-left: 0;
     margin-right: 0;
     padding: 0 $unit;
     max-width: auto;
     width: 100%;
 
+    &.Editable {
+      justify-content: flex-start;
+    }
+
     .SegmentedControl {
       flex-grow: 1;
     }

components/PartySegmentedControl/index.tsx

@@ -11,6 +11,7 @@ import ToggleSwitch from '~components/ToggleSwitch'
 import { GridType } from '~utils/enums'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   selectedTab: GridType
@@ -64,7 +65,12 @@ const PartySegmentedControl = (props: Props) => {
   )
 
   return (
-    <div className="PartyNavigation">
+    <div
+      className={classNames({
+        PartyNavigation: true,
+        Editable: party.editable,
+      })}
+    >
       <SegmentedControl elementClass={getElement()}>
         {/* <Segment
                     groupName="grid"

components/UncapStar/index.scss

@@ -1,36 +1,44 @@
 .UncapStar {
-  background-repeat: no-repeat;
-  background-size: 18px 18px;
-  display: block;
-  height: 18px;
-  width: 18px;
+  $size: 18px;
 
+  @media (max-width: $tablet) {
+    $size: 12px;
+  }
+
+  background-repeat: no-repeat;
+  background-size: $size;
+  display: block;
+  height: $size;
+  width: $size;
+
+  @media (min-width: $laptop) {
     &:hover {
       transform: scale(1.2);
     }
+  }
 
   &.empty,
   &.empty.mlb,
   &.empty.flb,
   &.empty.ulb,
   &.empty.special {
-    background: url('/icons/uncap/empty.svg');
+    background-image: url('/icons/uncap/empty.svg');
 
     &:hover {
-      background: url('/icons/uncap/empty-hover.svg');
+      background-image: url('/icons/uncap/empty-hover.svg');
     }
   }
 
   &.mlb {
-    background: url('/icons/uncap/yellow.svg');
+    background-image: url('/icons/uncap/yellow.svg');
 
     &:hover {
-      background: url('/icons/uncap/yellow-hover.svg');
+      background-image: url('/icons/uncap/yellow-hover.svg');
     }
   }
 
   &.special {
-    background: url('/icons/uncap/red.svg');
+    background-image: url('/icons/uncap/red.svg');
 
     &:hover {
       background: url('/icons/uncap/red-hover.svg');
@@ -38,7 +46,7 @@
   }
 
   &.flb {
-    background: url('/icons/uncap/blue.svg');
+    background-image: url('/icons/uncap/blue.svg');
 
     &:hover {
       background: url('/icons/uncap/blue-hover.svg');
@@ -46,10 +54,10 @@
   }
 
   &.ulb {
-    background: url('/icons/uncap/purple.svg');
+    background-image: url('/icons/uncap/purple.svg');
 
     &:hover {
-      background: url('/icons/uncap/purple-hover.svg');
+      background-image: url('/icons/uncap/purple-hover.svg');
     }
   }
 }

components/WeaponGrid/index.scss

@@ -2,6 +2,11 @@
   display: flex;
   justify-content: center;
 
+  @media (max-width: $phone) {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
   .grid_weapons {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
@@ -15,12 +20,17 @@
 #MainGrid,
 #ExtraGrid {
   .grid_weapons > * {
-    margin-bottom: $unit * 3;
-    margin-right: $unit * 3;
+    margin-bottom: $unit-3x;
+    margin-right: $unit-3x;
 
-    @media (max-width: $medium-screen) {
-      margin-bottom: $unit * 2;
-      margin-right: $unit * 2;
+    @media (max-width: $tablet) {
+      margin-bottom: $unit-2x;
+      margin-right: $unit-2x;
+    }
+
+    @media (max-width: $phone) {
+      margin-bottom: $unit;
+      margin-right: $unit;
     }
 
     &:nth-last-child(-n + 3) {

components/WeaponUnit/index.scss

@@ -25,11 +25,15 @@
   }
 
   &.mainhand {
-    margin-right: $unit * 3;
+    margin-right: $unit-3x;
     max-width: 200px;
 
-    @media (max-width: $medium-screen) {
-      margin-right: $unit * 2;
+    @media (max-width: $tablet) {
+      margin-right: $unit-2x;
+    }
+
+    @media (max-width: $phone) {
+      margin-right: $unit;
     }
 
     &.editable .WeaponImage:hover {

styles/globals.scss

@@ -303,9 +303,3 @@ i.tag {
     transform: translate(-50%, -50%) scale(1);
   }
 }
-
-@media (max-width: $phone) {
-  body {
-    padding: $unit !important;
-  }
-}

styles/variables.scss

@@ -21,6 +21,7 @@ $unit: 8px;
 $unit-fourth: calc($unit / 4);
 $unit-half: calc($unit / 2);
 $unit-2x: $unit * 2;
+$unit-3x: $unit * 3;
 $unit-4x: $unit * 4;
 $unit-6x: $unit * 6;
 $unit-8x: $unit * 8;