[UI5 Bar]: Button inside slotEnd being cut off

[PlutaKatarzyna]

Bug Description

When long text heading (as startContent slot) and button (as endContent slot) are added to ui5-bar, on smaller devices button is cut off. There is no enough space to fully display button and wrapper width is not configurable.

Affected Component

ui5-bar, udex-modal

Expected Behaviour

Could we have shadow parts for: .ui5-bar-startcontent-container, .ui5-bar-midcontent-container, .ui5-bar-endcontent-container element in ui5 bar, so min-width can be controlled by users?

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgICAgaDMge1xuICAgICAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgdGV4dC13cmFwOiBub3dyYXA7XG4gICAgICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1zYXBGb250RmFtaWx5KTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cbjxib2R5IHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2FwQmFja2dyb3VuZENvbG9yKVwiPlxuXG4gIDx1aTUtYmFyIGNsYXNzPVwiaGVhZGVyXCIgc2xvdD1cImhlYWRlclwiIGRlc2lnbj1cIkhlYWRlclwiIGRhdGEtc2FwLXVpLWZhc3RuYXZncm91cD1cInRydWVcIj5cbiAgICA8aDMgc2xvdD1cInN0YXJ0Q29udGVudFwiPkhlYWRlciB0aXRsZSBsb3JlbSBpcHN1bSBkb2xvcjwvaDM-XG4gICAgPHVpNS1idXR0b25cbiAgICBzbG90PVwiZW5kQ29udGVudFwiXG4gICAgaWNvbj1cImhvbWVcIlxuICA-PC91aTUtYnV0dG9uPlxuICAgIDwvdWk1LWJhcj5cbjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cbjwvaHRtbD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuXG4ifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xhYmVsLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CYXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2hvbWUuanNcIlxuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvYWN0aW9uLXNldHRpbmdzLmpzXCJcbiJ9fQ

Steps to Reproduce

1. Add heading into ui5-bar with slot startContent. Heading should contain long text to either be wrapped or truncated
2. Add button into ui5-bar with slot endContent
3. Open page in mobile device simulator to display bar in small resolution
4. Observe button being cut of

Log Output, Stack Trace or Screenshots

Issue us cause by setting 'min-width' for smaller ui5-bar resolution.
.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container .
Button placed inside do not have enough space to be displayed correctly.
Setting width to slots wrapper could fix that problem:

Priority

None

UI5 Web Components Version

1.24.8, 2.3.0

Browser

Chrome

Operating System

MacOS , Windows

Additional Context

UDEx reported ticket: https://github.tools.sap/sapudex/digital-design-system/issues/1188

UI5 Bar component is used inside UDEx Modal component header (extension on UI5 Dialog).

Organization

SAP / UDEx components team

Declaration

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

[dimovpetar]

Hello @SAP/ui5-webcomponents-topic-b ,

Please assess whether exposing those elements as CSS parts is meaningful.

Best regards,
Petar

[DMihaylova]

Hi @PlutaKatarzyna,

We'll firstly try to fix that as a bug. I took a look at UI5's one and it looks OK: https://ui5.sap.com/#/entity/sap.m.Bar/sample/sap.m.sample.Page/code (header part with "Title" and "share" icon).
If it's not possible, we'll work on providing new parts as requested.

Regards,
Diana

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v2.5.0-rc.3 🎉

The release is available on v2.5.0-rc.3

Your semantic-release bot 📦🚀

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v1.24.14 🎉

The release is available on v1.24.14

Your semantic-release bot 📦🚀