Button as suffix expands a single-row text-area

[tomivirkki]

Description

If you place a Button as a suffix inside a single-row TextArea, it expands vertically more than necessary

Currently I'm working around the issue with the following CSS:

vaadin-text-area::part(input-field) {
  padding-block: 0;
}

vaadin-text-area textarea {
  align-self: auto;
  padding-block: var(--lumo-space-s);
}

Expected outcome

I'd expect the TextArea to have the same height as a TextField with the same suffix

Minimal reproducible example

<script type="module">
  import '@vaadin/button';
  import '@vaadin/text-area';
  import '@vaadin/text-field';
  import '@vaadin/icon';
  import '@vaadin/icons/vaadin-iconset.js';
</script>

<vaadin-text-field label="TextField with suffix" required>
  <vaadin-button slot="suffix" theme="icon tertiary small">
    <vaadin-icon icon="vaadin:caret-right"></vaadin-icon>
  </vaadin-button>
</vaadin-text-field>

<vaadin-text-area label="TextArea with suffix" required min-rows="1">
  <vaadin-button slot="suffix" theme="icon tertiary small">
    <vaadin-icon icon="vaadin:caret-right"></vaadin-icon>
  </vaadin-button>
</vaadin-text-area>

Steps to reproduce

Open a HTML page with the snippet above included

Environment

Vaadin version(s): 24.7

Browsers

Issue is not browser related

[yuriy-fix]

@sissbruecker , is it related to the #1363?

[sissbruecker]

Sort of, IIRC the component applies some styles to icons and the clear button slotted into prefix and suffix so that those don't increase the component's height. But I guess the styles don't cover any other type of element.