fix: Modal text input can be resized smaller than its cell in Safari browser (#2930)

Author: mtrezza

src/components/Field/Field.react.js

@@ -22,12 +22,14 @@ const Field = ({ label, input, labelWidth = 50, labelPadding, height, className
     });
   }
   return (
-    <div className={classes.join(' ')}>
+    <div
+      className={classes.join(' ')}
+      style={{ '--modal-label-ratio': labelWidth / 100 }}
+    >
       <div
         className={styles.left}
         style={{
           height: height,
-          '--modal-label-ratio': labelWidth / 100,
         }}
       >
         {label}

src/components/Field/Field.scss

@@ -29,13 +29,14 @@
   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));
+  width: calc(var(--modal-min-width) * var(--modal-label-ratio));
+  max-width: calc(var(--modal-min-width) * var(--modal-label-ratio));
 }
 
 .right {
+  --modal-row-min-height: 80px;
   position: relative;
-  min-height: 80px;
+  min-height: var(--modal-row-min-height);
   text-align: right;
   padding: 0;
   background: #f6fafb;

src/components/TextInput/TextInput.scss

@@ -14,8 +14,8 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
-  min-width: 100%;
-  min-height: 100%;
+  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
+  min-height: var(--modal-row-min-height);
   padding: 6px;
   vertical-align: top;
   resize: both;