fix(ui): properly allows configuring rows for the textarea field (#…

…10031)

### What?

Previously, setting the `admin.rows` property did not change the height
of the `textarea` field input.

### Why?

Although `rows` was being properly set on the textarea element - it's
absolute positioning prevented the height from actually changing.

### How?

Updates the styles of the textarea field component to properly allow the
rows prop to change the height of the field.

Example w/:

```
{
  name: 'someTextArea',
  type: 'textarea',
  admin: {
    rows: 5,
  }
}
```
Before:
![Screenshot 2024-12-17 at 2 50
19 PM](https://github.com/user-attachments/assets/35d433c3-2fad-4930-9da6-b47b5e180af8)

After:
![Screenshot 2024-12-17 at 2 50
00 PM](https://github.com/user-attachments/assets/1a413639-ac29-46ce-b774-e1a30c5a21f0)

Fixes #10017

docs/fields/textarea.mdx

@@ -68,11 +68,12 @@ export const MyTextareaField: Field = {
 
 The Textarea Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
 
-| Option         | Description                                                                                                      |
-| -------------- | ---------------------------------------------------------------------------------------------------------------- |
-| **`placeholder`** | Set this property to define a placeholder string in the textarea.                                               |
-| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete.                                      |
-| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
+| Option             | Description                                                                                                                 |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| **`placeholder`**  | Set this property to define a placeholder string in the textarea.                                                           |
+| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete.                                                   |
+| **`rows`**         | Set the number of visible text rows in the textarea. Defaults to `2` if not specified.                                      |
+| **`rtl`**          | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
 
 ## Example
 

packages/ui/src/fields/Textarea/index.scss

@@ -40,9 +40,8 @@
 
     // Unstyle the textarea, the border is rendered on .textarea-outer
     .textarea-element {
-      position: absolute;
-      top: 0;
-      left: 0;
+      position: relative;
+      z-index: 1;
       width: 100%;
       height: 100%;
       border: inherit;
@@ -66,13 +65,17 @@
 
     // Clone of textarea with same height
     .textarea-clone {
-      vertical-align: top;
-      display: inline-block;
-      flex-grow: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: pre-wrap;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       pointer-events: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      visibility: hidden;
+      z-index: 0;
+      line-height: inherit;
     }
 
     .textarea-clone::before {