feat: Allow freeform text view resizing in modal dialogs (#2910)

Author: mtrezza

src/components/Field/Field.react.js

@@ -23,7 +23,13 @@ const Field = ({ label, input, labelWidth = 50, labelPadding, height, className
   }
   return (
     <div className={classes.join(' ')}>
-      <div className={styles.left} style={{ width: labelWidth + '% ', height: height }}>
+      <div
+        className={styles.left}
+        style={{
+          height: height,
+          '--modal-label-ratio': labelWidth / 100,
+        }}
+      >
         {label}
       </div>
       <div className={styles.right} style={{ height: height }}>

src/components/Field/Field.scss

@@ -28,6 +28,9 @@
 .left {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5));
+  max-width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5));
 }
 
 .right {
@@ -39,7 +42,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex: 1
+  flex: 1;
 }
 
 

src/components/Modal/Modal.scss

@@ -9,10 +9,12 @@
 
 .modal {
   @include modalAnimation();
+  --modal-min-width: 540px;
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 540px;
+  width: auto;
+  min-width: var(--modal-min-width);
   background: white;
   border-radius: 5px;
   overflow: hidden;

src/components/TextInput/TextInput.scss

@@ -14,9 +14,11 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
+  min-width: 100%;
+  min-height: 100%;
   padding: 6px;
   vertical-align: top;
-  resize: vertical;
+  resize: both;
 
   &:focus {
     @include placeholder {