chore: fix text area ui bug (appsmithorg#38282)

This PR fixes UI bugs in text area that got introduced during
refactoring of inputs.

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced layout and visual feedback for input components with refined
styles for focus, hover, and invalid states.
- Improved handling of read-only inputs and conditional styling based on
data attributes.

- **Bug Fixes**
- Adjusted height calculation logic for the TextArea component to ensure
accurate sizing across browsers.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12429446430>
> Commit: 28022c4
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12429446430&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 20 Dec 2024 10:28:51 UTC
<!-- end of auto-generated comment: Cypress test results  -->

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);
 }

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) {