diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js index 5cddd6f37885..53ee1eb915f3 100644 --- a/packages/fiori/src/ShellBar.js +++ b/packages/fiori/src/ShellBar.js @@ -897,6 +897,7 @@ class ShellBar extends UI5Element { wrapper: { "ui5-shellbar-root": true, "ui5-shellbar-with-searchfield": this.searchField.length, + "ui5-shellbar-with-coPilot": this.showCoPilot, }, button: { "ui5-shellbar-menu-button--interactive": this.hasMenuItems, diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 456de521c358..f309f074d03a 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -231,12 +231,15 @@ slot[name="profile"] { } .ui5-shellbar-overflow-container-left { - flex-basis: 50%; max-width: calc(50% - 1.5rem); justify-content: flex-start; margin-right: 0.5rem; } +.ui5-shellbar-with-coPilot .ui5-shellbar-overflow-container-left { + flex-basis: 50%; +} + .ui5-shellbar-menu-button { white-space: nowrap; overflow: hidden; @@ -276,7 +279,7 @@ slot[name="profile"] { .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child { display: flex; - float: right; + justify-content: flex-end; } .ui5-shellbar-overflow-button { @@ -360,9 +363,10 @@ slot[name="profile"] { } .ui5-shellbar-search-field { - width: 240px; + flex-grow: 1; min-width: 240px; margin-left: 0.5rem; + max-width: 25rem; } .ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {