[2008] ui-text-input partial rendering when set to text area (multi-line)

cypress/fixtures/flows/dashboard-text-input.json

@@ -431,6 +431,38 @@
             ]
         ]
     },
+    {
+        "id": "c1d2e3f4a5b60718",
+        "type": "ui-text-input",
+        "z": "f4f554a38c3ce158",
+        "g": "ecc44c4e975ac4e9",
+        "group": "cf67bdc7fbda3210",
+        "name": "",
+        "label": "Marking Notes",
+        "order": 2,
+        "width": 0,
+        "height": 3,
+        "topic": "topic",
+        "topicType": "msg",
+        "mode": "textarea",
+        "tooltip": "",
+        "delay": 300,
+        "passthru": true,
+        "sendOnDelay": false,
+        "sendOnBlur": true,
+        "sendOnEnter": true,
+        "className": "",
+        "clearable": false,
+        "sendOnClear": false,
+        "icon": "",
+        "iconPosition": "left",
+        "iconInnerPosition": "inside",
+        "x": 290,
+        "y": 120,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "9387656b7b07aa72",
         "type": "function",

cypress/tests/widgets/text-input.spec.js

@@ -15,4 +15,30 @@ describe('Node/-RED Dashboard 2.0 - Text Input Widget', () => {
         cy.get('#nrdb-ui-widget-ab3346b81a7cf742 .nrdb-ui-text-field').trigger('mouseover')
         cy.get('.v-tooltip').should('contain', 'Tooltip Text')
     })
+
+    // Test case: Renders the textarea (multiline) mode correctly
+    it('renders the Text Input widget in textarea mode', () => {
+        cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea').should('exist')
+        cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 .v-field__field label').should('contain', 'Marking Notes')
+    })
+
+    // Textarea padding is derived from the row height so the label clears the text
+    // without growing the row, scaling across densities (32/38/48px).
+    const densities = [
+        { name: 'compact (32px row)', cls: 'nrdb-view-density--compact', top: '4px', bottom: '0px' },
+        { name: 'comfortable (38px row)', cls: 'nrdb-view-density--comfortable', top: '7px', bottom: '3px' },
+        { name: 'default (48px row)', cls: 'nrdb-view-density--default', top: '12px', bottom: '8px' }
+    ]
+    densities.forEach(({ name, cls, top, bottom }) => {
+        it(`derives textarea padding from the row height at ${name}`, () => {
+            cy.get('.nrdb-app')
+                .invoke('removeClass', 'nrdb-view-density--compact nrdb-view-density--comfortable nrdb-view-density--default')
+                .invoke('addClass', cls)
+            cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea')
+                .parents('.v-field').first()
+                .find('.v-field__input')
+                .should('have.css', 'padding-top', top)
+                .and('have.css', 'padding-bottom', bottom)
+        })
+    })
 })

ui/src/widgets/ui-text-input/UITextInput.vue

@@ -179,6 +179,11 @@ export default {
 <style lang="scss">
 .nrdb-ui-textarea {
     height: 100%; /* Ensure the textarea takes full height */
+    --v-input-padding-top: max(4px, calc(var(--widget-row-height) / 2 - 12px));
+    &.v-input .v-field--variant-outlined {
+        --v-field-input-padding-top: max(4px, calc(var(--widget-row-height) / 2 - 12px));
+        --v-field-input-padding-bottom: max(0px, calc(var(--widget-row-height) / 2 - 16px));
+    }
     &.v-input--horizontal{
         &:has(textarea) {
             grid-template-rows: auto 0;