[ui5-bar]: Buttons in startContent and endContent are cut off when there is long title

[adrian-bobev]

Bug Description

If you have a long title in the bar default slot, the startContent and endContent buttons are cut off

Affected Component

ui5-bar

Expected Behaviour

No cut off

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI-XG4gICAgPHRpdGxlPlNhbXBsZTwvdGl0bGU-XG48L2hlYWQ-XG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcilcIj5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuICAgIDx1aTUtYmFyIGRlc2lnbj1cIkhlYWRlclwiPlxuICAgICAgICA8dWk1LWJ1dHRvbiBpY29uPVwiaG9tZVwiIHRvb2x0aXA9XCJHbyBob21lXCIgZGVzaWduPVwiVHJhbnNwYXJlbnRcIiBzbG90PVwic3RhcnRDb250ZW50XCI-PC91aTUtYnV0dG9uPlxuICAgICAgICA8dWk1LXRpdGxlIGlkPVwiYmFzaWMtbGFiZWxcIiB3cmFwcGluZy10eXBlPVwiTm9uZVwiPkNvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCBDb250ZW50IENvbnRlbnQgQ29udGVudCA8L3VpNS10aXRsZT5cbiAgICAgIFxuICAgIDwvdWk1LWJhcj5cbjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cbjwvaHRtbD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQnV0dG9uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9UaXRsZS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQmFyLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9ob21lLmpzXCJcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2FjdGlvbi1zZXR0aW5ncy5qc1wiXG4ifX0

Steps to Reproduce

1. Open the URL

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

latest, did not check others

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

[hinzzx]

Hello @adrian-bobev,

Since the content of the different parts (startContent, midContent, and endContent) can vary, I recommend setting a minimum width for the startContent and endContent sections. This can be easily achieved by leveraging the CSS ::part() pseudo-element.

For example:

[ui5-bar]::part(endContent) {
    min-width: 2rem;
}

This approach ensures that even if the content changes, the layout remains consistent.

Best regards,
Stoyan

[adrian-bobev]

Hello @hinzzx,

Actually, this won't fully resolve the underlying issue. In our case, we have a button with an icon that has a fixed width. However, the button could also contain translated text, which varies in size depending on the language.

I haven't tested all possible use cases of the bar, but setting min-width: fit-content on the start and end content divs consistently fixes the issue. I believe this adjustment should be handled at the component level rather than by the application itself.

Best regards,
Adrian