[SF][Toolbar]: Long text in the toolbar stretches to its full width and pushes the buttons out of view

[Jasonl157]

Describe the bug

Long text in the toolbar stretches to its full width and pushes the buttons out of view

Isolated Example

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

Reproduction steps

1. Open the link under Isolated Example

Expected Behaviour

ToolbarButton or the overflow button should be visible

Screenshots or Videos

No response

UI5 Web Components for React Version

2.22.1

UI5 Web Components Version

2.22.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

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

[TeodorTaushanov]

Hello @UI5/ui5-team-ctr-pir, can you check this issue?

[NakataCode]

Hello @Jasonl157,

Tested with plain HTML and UI5 Web Components — when placing a ui5-title inside a ui5-toolbar-item alongside multiple ui5-toolbar-button elements, the long title text causes the buttons to move into the overflow popover. The overflow button remains visible and accessible, and resizing the viewport to give more space brings the buttons back. The Title component is not meant to be used with such long text content.

Here is a link to an example.

The behavior described in the issue appears to be specific to the @ui5/webcomponents-react.

I hope this helps clarify things out!

Best regards,
Nikola

[Lukas742]

Hi @NakataCode

@ui5/webcomponents-react doesn't change how the custom elements are rendered. Here you can find the same example just without React or our wrapper and the behavior is the same.