From e203a5799b641dda77bcb8100d93a89d71ec710b Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 9 Apr 2025 15:36:59 +0300 Subject: [PATCH] fix(ui5-bar): prevent midContent from overlapping start and endContent on overflow --- packages/main/src/themes/Bar.css | 37 +++++++++++++++++++------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css index ccd7d753d0fe..c9957112b4c6 100644 --- a/packages/main/src/themes/Bar.css +++ b/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"]){