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

[bomasap]

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.

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[ndeshev]

Hello @UI5/ui5-team-webc I checked that there is a wrapping in the form header, however the reported issue for the FormGroup header is present because it seems like by visual specifications the header text should be truncated, but there are no truncation styles applied.

Could you please check this case and if there is a reason for that implementation or a solution to share more details.

Kind regards,
Nikolay