[Toolbar]: Toolbar Component in DynamicPageTitle - numberOfAlwaysVisibleItems Not Working Correctly

[bomasap]

Describe the bug

When the toolbar component is used within the DynamicPageTitle and the numberOfAlwaysVisibleItems property is set to 2, all buttons are moved to the overflow popover when the page width is less than 1680px.

Isolated Example

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

Reproduction steps

1. Use the toolbar component within the DynamicPageTitle.
2. Set the numberOfAlwaysVisibleItems property to 2.
3. Resize the page width to be less than 1680px.
4. Observe that all buttons are displayed in the overflow popover.

Expected Behaviour

The expected behavior is that there should always be 2 visible buttons.

Screenshots or Videos

UI5 Web Components for React Version

1.28.4

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @bomasap

only "actions" (preferably buttons) should be passed to the actions prop. If you want to customize the internal Toolbar, you can use the actionsToolbarProps prop. Here you can find an example applying numberOfAlwaysVisibleItems: https://stackblitz.com/edit/github-t5j5mn-kurjmr?file=src%2FApp.tsx

[bomasap]

Hi @Lukas742 If put a component into "actions" dynamicPageTile, the actionsToolbarProps is not working, and the the gap is missing between buttons(this defect is mentioned in https://github.com/SAP/ui5-webcomponents-react/issues/5873)

https://stackblitz.com/edit/github-t5j5mn-sqkfkc?file=src%2FActions.tsx,src%2FApp.tsx

[Lukas742]

This has the same reason as outlined here.

custom components that render multiple elements are currently not supported as actions of the DynamicPageTitle. You can find out more about this here.