Fix TableField components on mobile

components/common/Select/index.module.scss

@@ -63,6 +63,10 @@
 
   &.table {
     min-width: $unit * 30;
+
+    @include breakpoint(phone) {
+      width: 100%;
+    }
   }
 
   &.hidden {

components/common/Slider/index.module.scss

@@ -14,6 +14,10 @@
     border-radius: 9999px;
     height: 3px;
   }
+
+  &.table {
+    flex-grow: 1;
+  }
 }
 
 .range {

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}
       />

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;