From 757374cda34aba68b9c045fad4b8f3a7504e3faa Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 19 Jul 2025 23:29:02 +0200
Subject: [PATCH 1/4] fix: TextInput cannot shrink after resize in Safari

---
 src/components/TextInput/TextInput.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
index 825c3cfaf7..bc9ff55e29 100644
--- a/src/components/TextInput/TextInput.scss
+++ b/src/components/TextInput/TextInput.scss
@@ -14,8 +14,6 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
-  min-width: 100%;
-  min-height: 100%;
   padding: 6px;
   vertical-align: top;
   resize: both;

From 67f9872887ceb5e4224429f3ee6180d2e7dc3c70 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 19 Jul 2025 23:45:46 +0200
Subject: [PATCH 2/4] fix: text input can shrink below modal width

---
 src/components/Field/Field.react.js     | 6 ++++--
 src/components/TextInput/TextInput.scss | 3 +++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Field/Field.react.js b/src/components/Field/Field.react.js
index d768d0489e..11610daba9 100644
--- a/src/components/Field/Field.react.js
+++ b/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}
diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
index bc9ff55e29..ad2e1dd4b2 100644
--- a/src/components/TextInput/TextInput.scss
+++ b/src/components/TextInput/TextInput.scss
@@ -14,6 +14,9 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
+  min-width: calc(
+    var(--modal-min-width, 540px) * (1 - var(--modal-label-ratio, 0.5))
+  );
   padding: 6px;
   vertical-align: top;
   resize: both;

From 26a602ef32f9bad82cbb1be50d6f4d90eaec3198 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sun, 20 Jul 2025 01:30:54 +0200
Subject: [PATCH 3/4] fix: textarea resizable smaller than modal

---
 src/components/TextInput/TextInput.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
index ad2e1dd4b2..b3aa9f6d5f 100644
--- a/src/components/TextInput/TextInput.scss
+++ b/src/components/TextInput/TextInput.scss
@@ -14,9 +14,11 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
-  min-width: calc(
-    var(--modal-min-width, 540px) * (1 - var(--modal-label-ratio, 0.5))
+  min-width: max(
+    100%,
+    calc(var(--modal-min-width, 540px) * (1 - var(--modal-label-ratio, 0.5)))
   );
+  min-height: 100%;
   padding: 6px;
   vertical-align: top;
   resize: both;

From e6118cc4101d1b660e627e5ddf5135cf40be8ee1 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Sun, 20 Jul 2025 01:51:00 +0200
Subject: [PATCH 4/4] fix

---
 src/components/Field/Field.scss         | 7 ++++---
 src/components/TextInput/TextInput.scss | 7 ++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index bf0f387fbf..eead4fa8d2 100644
--- a/src/components/Field/Field.scss
+++ b/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;
diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
index b3aa9f6d5f..17f9883136 100644
--- a/src/components/TextInput/TextInput.scss
+++ b/src/components/TextInput/TextInput.scss
@@ -14,11 +14,8 @@
   background: $inputBackgroundColor;
   font-size: 16px;
   width: 100%;
-  min-width: max(
-    100%,
-    calc(var(--modal-min-width, 540px) * (1 - var(--modal-label-ratio, 0.5)))
-  );
-  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;