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

[n-lark]

Description

In textarea (multi-line) mode, the global outlined-field rule that compresses input padding to 2px for compact single-line inputs left the floating label overlapping the first line of text. This restores adequate top/bottom padding scoped to the textarea only (single-line inputs keep their compact spacing), and adds a Cypress regression test asserting the padding isn't collapsed.

Related Issue(s)

Resolves #2008

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[colinl]

Can I ask whether you have checked it with compact row spacing in the theme?

[Steve-Mcl]

Unfortunately this would cause misalignment with other widgets when anything other than default density is set on the theme.

For example, adding 3 text elements in a group and setting the density to compact, when this PR applies its styling, it affects adjacent widgets in the same group and causes misalignment with widgets in other groups.

BEFORE

AFTER

This is something the community will jump on immediately so needs a bit of a re-think.

[n-lark]

Hey @Steve-Mcl I updated this so we now derive the padding and fade from --widget-row-height so it clears the label and scales per density without growing the row. The max() floors keep it valid if a sub-32px density is ever added.

// scoped to .nrdb-ui-textarea 

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

Compact

Comfortable

Default

[Steve-Mcl]

confirmed 👊