SelectTableField mobile changes

components/SelectTableField/index.scss

@@ -1,17 +1,47 @@
 .TableField {
   align-items: center;
   display: grid;
-  gap: $unit * 2;
+  gap: $unit-2x;
   grid-template-columns: 1fr auto;
 
-  &.Image {
-    grid-template-columns: 1fr auto 1fr;
+  @include breakpoint(phone) {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
   }
 
   .Left {
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    width: 100%;
+
+    .Info {
       display: flex;
       flex-direction: column;
-    gap: calc($unit / 2);
+      flex-grow: 1;
+      justify-content: center;
+      gap: $unit-half;
+    }
+
+    .Image {
+      display: none;
+
+      .preview {
+        $diameter: $unit-5x;
+        width: $diameter;
+        height: $diameter;
+
+        img {
+          width: $diameter;
+          height: $diameter;
+        }
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
 
     label {
       color: var(--text-tertiary);
@@ -30,6 +60,23 @@
     }
   }
 
+  .Right {
+    display: flex;
+    flex-direction: row;
+    gap: $unit-2x;
+    width: 100%;
+
+    @include breakpoint(phone) {
+      .Image {
+        display: none;
+      }
+    }
+
+    .SelectTrigger {
+      width: 100%;
+    }
+  }
+
   .preview {
     $diameter: $unit * 6;
     background-color: $grey-90;

components/SelectTableField/index.tsx

@@ -44,13 +44,15 @@ const SelectTableField = (props: Props) => {
   return (
     <div className={classNames({ TableField: true }, props.className)}>
       <div className="Left">
+        <div className="Info">
           <h3>{props.label}</h3>
           <p>{props.description}</p>
         </div>
-
-      {image()}
+        <div className="Image">{image()}</div>
+      </div>
 
       <div className="Right">
+        <div className="Image">{image()}</div>
         <Select
           name={props.name}
           open={props.open}