ui5-form: FormGroup heading text overflows and overlaps content when group name exceeds fixed height

Describe the bug

The .ui5-form-group-heading element inside ui5-form's shadow DOM is rendered with a fixed height (and matching line-height) driven by the CSS variable --_ui5-form-group-heading-height (default: 2.75rem, compact: 2rem):

  .ui5-form-group-heading {
    height: var(--_ui5-form-group-heading-height);
    line-height: var(--_ui5-form-group-heading-height);
  }

When a FormGroup's headerText is long enough to wrap onto multiple lines, the container does not expand — the text overflows the fixed-height box and visually overlaps the form items below it.

Isolated Example

https://stackblitz.com/edit/github-nc5aumrw-w6zbywej?file=src%2FApp.tsx

Reproduction steps

1. Open the isolated example: https://stackblitz.com/edit/github-nc5aumrw-w6zbywej?file=src%2FApp.tsx
2. Observe the FormGroup with the heading "Personal DataPersonal DataPersonal DataPersonal DataPersonal DataPersonal DataPersonal Data"
3. Notice the group heading text overflows its fixed-height container and overlaps the form fields below it

Expected Behaviour

The heading container expands vertically to fit wrapped text. height should behave as min-height so short labels retain the standard row height while long labels grow to accommodate the content.

Screenshots or Videos

UI5 Web Components for React Version

2.24.0

UI5 Web Components Version

2.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.