diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
index d0faca4f3a6c..63a0d04a895c 100644
--- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
@@ -8,8 +8,6 @@
 
 .inputGroup {
   max-inline-size: 100%;
-  padding-block: var(--inner-spacing-1);
-  padding-inline: var(--inner-spacing-2);
   gap: var(--inner-spacing-1);
   border: 0;
   border-radius: var(--border-radius-elevation-3);
@@ -26,6 +24,17 @@
   background-color: transparent;
   flex: 1;
   padding: 0;
+  padding-block: var(--inner-spacing-1);
+  padding-inline: var(--inner-spacing-2);
+  box-sizing: content-box;
+}
+
+.inputGroup:has([data-input-prefix]) .input {
+  padding-inline-start: 0;
+}
+
+.inputGroup:has([data-input-suffix]) .input {
+  padding-inline-end: 0;
 }
 
 .input:is(textarea) {
@@ -50,6 +59,14 @@
  * SUFFIX and PREFIX
  * ----------------------------------------------------------------------------
  */
+.inputGroup [data-input-prefix] {
+  margin-inline-start: var(--inner-spacing-2);
+}
+
+.inputGroup [data-input-suffix] {
+  margin-inline-end: var(--inner-spacing-2);
+}
+
 .inputGroup :is([data-input-suffix], [data-input-prefix]) button {
   border-radius: calc(
     var(--border-radius-elevation-3) - var(--inner-spacing-1)
@@ -60,7 +77,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 0;
 }
 
 /**
@@ -88,9 +104,12 @@
  * READONLY
  * ----------------------------------------------------------------------------
  */
-.input[data-readonly] {
+.inputGroup:has(> .input[data-readonly]) {
   background-color: transparent;
   box-shadow: none;
+}
+
+.inputGroup input[data-readonly] {
   padding-inline: 0;
 }
 
@@ -164,17 +183,17 @@
  * SIZE
  * ----------------------------------------------------------------------------
  */
-.inputGroup:has(> .input[data-size="small"]) {
-  block-size: calc(
-    var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) +
-      var(--inner-spacing-2) * 2
-  );
+.inputGroup .input {
+  block-size: var(--body-line-height);
 }
 
-.inputGroup:has(> .input[data-size="large"]) {
+.inputGroup .input[data-size="small"] {
   block-size: calc(
     var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end)
   );
-  padding-block: var(--inner-spacing-3);
-  padding-inline: var(--inner-spacing-3);
+  padding: var(--inner-spacing-2);
+}
+
+.inputGroup .input[data-size="large"] {
+  padding: var(--inner-spacing-3);
 }
diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
index 042e54a1c35c..d004f2d79755 100644
--- a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx
@@ -76,16 +76,12 @@ export function TextArea(props: TextAreaProps) {
 
       input.style.height = `${
         // subtract comptued padding and border to get the actual content height
-        input.scrollHeight -
-        paddingTop -
-        paddingBottom +
-        // Also, adding 1px to fix a bug in browser where there is a scrolllbar on certain heights
-        1
+        input.scrollHeight - paddingTop - paddingBottom
       }px`;
       input.style.overflow = prevOverflow;
       input.style.alignSelf = prevAlignment;
     }
-  }, [inputRef.current, props.height]);
+  }, [props.height]);
 
   useLayoutEffect(() => {
     if (inputRef.current) {