fix: WDS TextArea inner spacing (#34901)

## Description

Fixes #34584
| Before | After |
|--------|--------|
|
![before](https://github.com/user-attachments/assets/b0d58e3b-006e-49cc-af7f-5c600326caed)
|
![after](https://github.com/user-attachments/assets/935590ea-2a3b-4912-a28c-16b47ba9d83c)
|

We had [a CSS
rule](f6d62e5cdc/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css (L27-L30))
that was imitating CapSize behavior.

It worked okay with regular input but had no effect on TextArea. Fixing
it to work for TextArea did not seem possible no matter what CSS rules
or additional markup I threw at it:
<details><summary>Dev tools screenshots</summary>
<p>
<table>
<tr>
<td>
<img width="1252" alt="Screenshot 2024-07-12 at 10 32 30"
src="https://github.com/user-attachments/assets/c529f8b9-b129-4358-88e1-cee59a0797a6">
</td>
<td>
<img width="1270" alt="Screenshot 2024-07-12 at 10 32 40"
src="https://github.com/user-attachments/assets/52cc122e-cc0b-4e18-84d5-006b5ed56ef1">
</td>
</tr>
</table>
</p>
</details>

Changing the inner spacing and removing that rule achieves the desired
results: elements are neatly aligned with similar/equal paddings. See
the example with additional elements alongside TextInput and TextArea
that verifies that vertical alignment is consistent:

![after-extras](https://github.com/user-attachments/assets/8fa7e867-22a8-4790-a0fc-daf76ccd5dbc)

## Automation

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

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


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [X] No


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

## Summary by CodeRabbit

- **Style**
- Updated vertical padding for text input fields to improve spacing and
visual clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
vadim 2024-07-22 10:15:17 +02:00 committed by GitHub
parent 78413ab4c0
commit 01d5275170
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 1 additions and 5 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

View File

@ -24,11 +24,7 @@
max-inline-size: 100%;
width: 100%;
box-sizing: content-box;
block-size: calc(
var(--body-line-height) + var(--body-margin-start) +
var(--body-margin-end)
);
padding-block: var(--inner-spacing-3);
padding-block: var(--inner-spacing-1);
&:autofill,
&:autofill:hover,