From f1f776119dc1e2064491278fde2467900806759a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 Dec 2022 14:28:53 -0800
Subject: [PATCH] Another mobile hotfix

---
 components/Header/index.scss                |  6 ++++++
 components/PartyDetails/index.scss          |  4 ++++
 components/PartySegmentedControl/index.scss | 23 +++++++++++++++++++++
 components/PartySegmentedControl/index.tsx  |  2 +-
 components/Segment/index.scss               |  4 ++++
 styles/globals.scss                         |  8 ++++++-
 styles/variables.scss                       |  9 +++++++-
 7 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/components/Header/index.scss b/components/Header/index.scss
index 34dcc5b9..9832669b 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -35,4 +35,10 @@
   .push {
     margin-left: auto;
   }
+
+  @media (max-width: $phone) {
+    .Button .Text {
+      display: none;
+    }
+  }
 }
diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index 0acdb56b..b8279fd2 100644
--- a/components/PartyDetails/index.scss
+++ b/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;
diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss
index c4991d17..d37ee3fb 100644
--- a/components/PartySegmentedControl/index.scss
+++ b/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;
+    }
+  }
 }
diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx
index 36936b57..c4705bcb 100644
--- a/components/PartySegmentedControl/index.tsx
+++ b/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}
diff --git a/components/Segment/index.scss b/components/Segment/index.scss
index 8341cac4..1733ac6e 100644
--- a/components/Segment/index.scss
+++ b/components/Segment/index.scss
@@ -33,4 +33,8 @@
       background: #fff;
     }
   }
+
+  @media (max-width: $phone) {
+    min-width: auto;
+  }
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index 204574d2..9477c243 100644
--- a/styles/globals.scss
+++ b/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;
+  }
+}
diff --git a/styles/variables.scss b/styles/variables.scss
index 5634d2f8..56a08c9e 100644
--- a/styles/variables.scss
+++ b/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;