Update padding and fade to calc from row height

Author: n-lark

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

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