From bbd45abb94fba1c47f7e07ae25b95d4eea776a48 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 9 Jun 2026 08:28:05 -0700
Subject: [PATCH 1/2] Restore textarea top padding so floating label no longer
 overlaps text & add specs

---
 .../fixtures/flows/dashboard-text-input.json  | 32 +++++++++++++++++++
 cypress/tests/widgets/text-input.spec.js      | 15 +++++++++
 ui/src/widgets/ui-text-input/UITextInput.vue  |  4 +++
 3 files changed, 51 insertions(+)

diff --git a/cypress/fixtures/flows/dashboard-text-input.json b/cypress/fixtures/flows/dashboard-text-input.json
index 62bd738e9..c9dea5723 100644
--- a/cypress/fixtures/flows/dashboard-text-input.json
+++ b/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",
diff --git a/cypress/tests/widgets/text-input.spec.js b/cypress/tests/widgets/text-input.spec.js
index 46071fc2d..6610dea60 100644
--- a/cypress/tests/widgets/text-input.spec.js
+++ b/cypress/tests/widgets/text-input.spec.js
@@ -15,4 +15,19 @@ 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')
+    })
+
+    // Regression test for #2008: textarea must keep its top padding so the
+    // floating label doesn't overlap the text (not collapsed to the global 2px).
+    it('keeps top padding in textarea mode so the label does not overlap the text', () => {
+        cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea')
+            .parents('.v-field').first()
+            .find('.v-field__input')
+            .should('have.css', 'padding-top', '12px')
+    })
 })
diff --git a/ui/src/widgets/ui-text-input/UITextInput.vue b/ui/src/widgets/ui-text-input/UITextInput.vue
index 5d570692b..c2eec6966 100644
--- a/ui/src/widgets/ui-text-input/UITextInput.vue
+++ b/ui/src/widgets/ui-text-input/UITextInput.vue
@@ -179,6 +179,10 @@ export default {
 <style lang="scss">
 .nrdb-ui-textarea {
     height: 100%; /* Ensure the textarea takes full height */
+    &.v-input .v-field--variant-outlined {
+        --v-field-input-padding-top: 12px;
+        --v-field-input-padding-bottom: 12px;
+    }
     &.v-input--horizontal{
         &:has(textarea) {
             grid-template-rows: auto 0;

From 0b3a46f7926b9ff66968b8ac50fbf85bc2f57a39 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Thu, 11 Jun 2026 11:43:51 -0700
Subject: [PATCH 2/2] Update padding and fade to calc from row height

---
 cypress/tests/widgets/text-input.spec.js     | 25 ++++++++++++++------
 ui/src/widgets/ui-text-input/UITextInput.vue |  5 ++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/cypress/tests/widgets/text-input.spec.js b/cypress/tests/widgets/text-input.spec.js
index 6610dea60..fab8d0b8c 100644
--- a/cypress/tests/widgets/text-input.spec.js
+++ b/cypress/tests/widgets/text-input.spec.js
@@ -22,12 +22,23 @@ describe('Node/-RED Dashboard 2.0 - Text Input Widget', () => {
         cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 .v-field__field label').should('contain', 'Marking Notes')
     })
 
-    // Regression test for #2008: textarea must keep its top padding so the
-    // floating label doesn't overlap the text (not collapsed to the global 2px).
-    it('keeps top padding in textarea mode so the label does not overlap the text', () => {
-        cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea')
-            .parents('.v-field').first()
-            .find('.v-field__input')
-            .should('have.css', 'padding-top', '12px')
+    // 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)
+        })
     })
 })
diff --git a/ui/src/widgets/ui-text-input/UITextInput.vue b/ui/src/widgets/ui-text-input/UITextInput.vue
index c2eec6966..a7ba297b5 100644
--- a/ui/src/widgets/ui-text-input/UITextInput.vue
+++ b/ui/src/widgets/ui-text-input/UITextInput.vue
@@ -179,9 +179,10 @@ 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: 12px;
-        --v-field-input-padding-bottom: 12px;
+        --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) {