feat(ui5-toolbar): fixed spacer behavior

packages/main/src/Toolbar.ts

@@ -384,15 +384,14 @@ class Toolbar extends UI5Element {
 	processOverflowLayout() {
 		const containerWidth = this.offsetWidth - this.padding;
 		const contentWidth = this.itemsWidth;
+		const overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
 
 		// skip calculation if the width has not been changed or if the items width has not been changed
 		if (this.width === containerWidth && this.contentWidth === contentWidth) {
 			return;
 		}
 
-		// if there is not enough space, distribute items while calculating overflow button. Otherwise don't calc overflow space/area
-		this.distributeItems(contentWidth > containerWidth ? contentWidth - containerWidth + this.overflowButtonSize : 0);
-
+		this.distributeItems(overflowSpace);
 		this.width = containerWidth;
 		this.contentWidth = contentWidth;
 	}
@@ -506,12 +505,6 @@ class Toolbar extends UI5Element {
 		}
 
 		this.closeOverflow();
-
-		// re-calculate items width if there is a dynamic spacer
-		if (this.hasFlexibleSpacers) {
-			this.storeItemsWidth();
-		}
-
 		this.processOverflowLayout();
 	}
 

packages/main/src/ToolbarSpacer.ts

@@ -38,11 +38,11 @@ class ToolbarSpacer extends ToolbarItem {
 	}
 
 	get ignoreSpace() {
-		return this.width === "";
+		return this.width === "" || this.width === undefined || this.width === "auto";
 	}
 
 	get hasFlexibleWidth() {
-		return this.width === undefined || this.width === "auto";
+		return this.width === "" || this.width === undefined || this.width === "auto";
 	}
 
 	static get toolbarTemplate() {