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

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

This issue has been closed. To reopen, just leave a comment!

🎉 This issue has been resolved in version v2.10.0 🎉

The release is available on v2.10.0

Your semantic-release bot 📦🚀