fix: modal label width grows when resizing text field

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

@@ -29,6 +29,8 @@
   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 {

src/components/Modal/Modal.scss

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