Another mobile hotfix

components/Header/index.scss

@@ -35,4 +35,10 @@
   .push {
     margin-left: auto;
   }
+
+  @media (max-width: $phone) {
+    .Button .Text {
+      display: none;
+    }
+  }
 }

components/PartyDetails/index.scss

@@ -3,6 +3,10 @@
   flex-direction: column;
   margin-top: $unit-4x;
 
+  @media (max-width: $phone) {
+    padding: 0 $unit;
+  }
+
   .PartyDetails {
     display: none;
     margin: 0 auto;

components/PartySegmentedControl/index.scss

@@ -1,4 +1,5 @@
 .PartyNavigation {
+  align-items: center;
   display: flex;
   gap: 58px;
   justify-content: center;
@@ -6,6 +7,20 @@
   margin-bottom: $unit * 3;
   max-width: 760px;
   position: relative;
+
+  @media (max-width: $phone) {
+    gap: $unit;
+    justify-content: flex-start;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0 $unit;
+    max-width: auto;
+    width: 100%;
+
+    .SegmentedControl {
+      flex-grow: 1;
+    }
+  }
 }
 
 .ExtraSwitch {
@@ -17,4 +32,12 @@
   height: 100%;
   position: absolute;
   right: 0px;
+
+  @media (max-width: $phone) {
+    position: static;
+
+    .Text {
+      display: none;
+    }
+  }
 }

components/PartySegmentedControl/index.tsx

@@ -53,7 +53,7 @@ const PartySegmentedControl = (props: Props) => {
 
   const extraToggle = (
     <div className="ExtraSwitch">
-      Extra
+      <span className="Text">Extra</span>
       <ToggleSwitch
         name="ExtraSwitch"
         editable={party.editable}

components/Segment/index.scss

@@ -33,4 +33,8 @@
       background: #fff;
     }
   }
+
+  @media (max-width: $phone) {
+    min-width: auto;
+  }
 }

styles/globals.scss

@@ -14,7 +14,7 @@ body {
     sans-serif;
   font-size: 1.4rem;
   height: 100%;
-  padding: $unit * 2 !important;
+  padding: $unit-2x !important;
 
   &.no-scroll {
     overflow: hidden;
@@ -303,3 +303,9 @@ i.tag {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+
+@media (max-width: $phone) {
+  body {
+    padding: $unit !important;
+  }
+}

styles/variables.scss

@@ -6,7 +6,14 @@ $breakpoints: (
   medium: 800px,
   large: 1024px,
 );
-$medium-screen: 800px;
+
+$desktop: 1920px;
+$laptop: 1280px;
+$tablet: 768px;
+$phone: 375px;
+
+// Legacy
+$medium-screen: 768px;
 
 // Sizing
 $unit: 8px;