fix(ui5-shellbar): fix search field width (#3296)

SAP · May 27, 2021 · 51fb1a3 · 51fb1a3
1 parent 290b60b
commit 51fb1a3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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 {