From 14994bfbbd8f8beb7d828cd759df71a8a0e0fa44 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 6 Jul 2023 18:37:44 -0700
Subject: [PATCH] Fix TableField components on mobile

---
 components/common/Select/index.module.scss     | 4 ++++
 components/common/Slider/index.module.scss     | 4 ++++
 components/common/SliderTableField/index.tsx   | 1 +
 components/common/TableField/index.module.scss | 8 ++++++++
 4 files changed, 17 insertions(+)

diff --git a/components/common/Select/index.module.scss b/components/common/Select/index.module.scss
index 93b8eaa1..6417cffd 100644
--- a/components/common/Select/index.module.scss
+++ b/components/common/Select/index.module.scss
@@ -63,6 +63,10 @@
 
   &.table {
     min-width: $unit * 30;
+
+    @include breakpoint(phone) {
+      width: 100%;
+    }
   }
 
   &.hidden {
diff --git a/components/common/Slider/index.module.scss b/components/common/Slider/index.module.scss
index a34fb341..6ab8f85a 100644
--- a/components/common/Slider/index.module.scss
+++ b/components/common/Slider/index.module.scss
@@ -14,6 +14,10 @@
     border-radius: 9999px;
     height: 3px;
   }
+
+  &.table {
+    flex-grow: 1;
+  }
 }
 
 .range {
diff --git a/components/common/SliderTableField/index.tsx b/components/common/SliderTableField/index.tsx
index 00108118..02527f05 100644
--- a/components/common/SliderTableField/index.tsx
+++ b/components/common/SliderTableField/index.tsx
@@ -54,6 +54,7 @@ const SliderTableField = (props: Props) => {
         max={props.max}
         step={props.step}
         value={[props.value ? props.value : 0]}
+        className="table"
         onValueChange={handleValueChange}
         onValueCommit={handleValueCommit}
       />
diff --git a/components/common/TableField/index.module.scss b/components/common/TableField/index.module.scss
index de900793..e48b5328 100644
--- a/components/common/TableField/index.module.scss
+++ b/components/common/TableField/index.module.scss
@@ -36,6 +36,14 @@
     }
   }
 
+  &.switch {
+    @include breakpoint(phone) {
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
   .left {
     align-items: center;
     display: flex;