fix(ui5-bar): prevent midContent from overlapping start and endContent on overflow (#11294)

Previously when the content inside the <ui5-bar> component, especially a long text in the midContent slot, was provided the content was overlapping the startContent and endContent, especially when the bar was resized or contained limited space.

2025-04-09_15-41-31

The reason behind this was that while all three content containers were using flex, they allowed the middle content (midContent) to grow too much.

Now the startContent and endContent set to flex: 0 0 auto to maintain their natural size and prevent shrinking past their content.

midContent set to flex: 1 1 auto to take up remaining space and shrink if needed.
min-width: 0 on midContent to allow truncation.
Added overflow: hidden to .ui5-bar-root so any overflowing content would be clipped rather than spill outside the bar (just like in UI5);
2025-04-09_15-45-32

Fixes: #11028

Co-authored-by: tsanislavgatev <[email protected]>

Author: hinzzx

packages/main/src/themes/Bar.css

@@ -15,14 +15,32 @@
 	background-color: inherit;
 	box-shadow: inherit;
 	border-radius: inherit;
+	min-width: 0;
+	overflow: hidden;
 }
 
-.ui5-bar-root .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
+.ui5-bar-root .ui5-bar-startcontent-container,
+.ui5-bar-root .ui5-bar-endcontent-container,
+.ui5-bar-root .ui5-bar-midcontent-container {
 	display: flex;
-	flex-direction: row;
 	align-items: center;
-	justify-content: flex-start;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container,
+.ui5-bar-root .ui5-bar-endcontent-container {
+	flex: 0 0 auto;
+}
+
+.ui5-bar-root .ui5-bar-midcontent-container {
+	justify-content: center;
+	flex: 1 1 auto;
+	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
 }
 
 .ui5-bar-root .ui5-bar-content-container {
@@ -39,17 +57,6 @@
 
 .ui5-bar-root .ui5-bar-endcontent-container {
 	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-end;
-}
-.ui5-bar-root .ui5-bar-midcontent-container {
-	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
 }
 
 :host([design="Footer"]){