From 69fda89e819d7216b4fc49503307ce0911b7724a Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 5 Sep 2024 12:52:45 +0300
Subject: [PATCH 1/9] fix(ui5-bar): provide support for responsive paddings

---
 packages/main/src/Bar.ts         | 10 ++++++++++
 packages/main/src/themes/Bar.css | 29 +++++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index 6bbc54b1f409..ec475671144e 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import type BarDesign from "./types/BarDesign.js";
 
 // Template
@@ -83,6 +84,13 @@ class Bar extends UI5Element {
 	@slot({ type: HTMLElement })
 	endContent!: Array<HTMLElement>
 
+	/**
+	 * Defines the current media query size.
+	 * @private
+	 */
+	@property()
+	mediaRange?: string;
+
 	_handleResizeBound: () => void;
 
 	get accInfo() {
@@ -100,6 +108,8 @@ class Bar extends UI5Element {
 	handleResize() {
 		const bar = this.getDomRef()!;
 		const barWidth = bar.offsetWidth;
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, barWidth);
+
 		const needShrinked = Array.from(bar.children).some(child => {
 			return (child as HTMLElement).offsetWidth > barWidth / 3;
 		});
diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index c35ee782bcec..e97191d45e16 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -18,7 +18,6 @@
 }
 
 .ui5-bar-root .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -38,7 +37,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;
@@ -72,4 +70,31 @@
 
 ::slotted(*) {
 	margin: 0 0.25rem;
+}
+
+:host([media-range="S"]) .ui5-bar-startcontent-container,
+:host([media-range="S"]) .ui5-bar-endcontent-container {
+	padding-inline-start: 1rem;
+}
+
+:host([media-range="M"]) .ui5-bar-startcontent-container,
+:host([media-range="L"]) .ui5-bar-startcontent-container {
+	padding-inline-start: 2rem;
+}
+
+:host([media-range="XL"]) .ui5-bar-startcontent-container {
+	padding-inline-start: 3rem;
+}
+
+:host([media-range="S"]) .ui5-bar-endcontent-container {
+	padding-inline-end: 1rem;
+}
+
+:host([media-range="M"]) .ui5-bar-endcontent-container,
+:host([media-range="L"]) .ui5-bar-endcontent-container {
+	padding-inline-end: 2rem;
+}
+
+:host([media-range="XL"]) .ui5-bar-endcontent-container {
+	padding-inline-end: 3rem;
 }
\ No newline at end of file

From 195ce98cd0325f8ee4cade72a1d5410da4bb6831 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 5 Sep 2024 13:27:24 +0300
Subject: [PATCH 2/9] fix: add CSS variables for the padding

---
 packages/main/src/themes/Bar.css                 | 16 +++++++---------
 packages/main/src/themes/base/Bar-parameters.css |  8 ++++++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index e97191d45e16..7bfbe64a6d0c 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -25,9 +25,7 @@
 }
 
 .ui5-bar-root .ui5-bar-content-container {
-	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
-							 + var(--_ui5_bar-end-container-padding-end)
-						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	min-width: 30%;
 }
 
 .ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
@@ -74,27 +72,27 @@
 
 :host([media-range="S"]) .ui5-bar-startcontent-container,
 :host([media-range="S"]) .ui5-bar-endcontent-container {
-	padding-inline-start: 1rem;
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
 }
 
 :host([media-range="M"]) .ui5-bar-startcontent-container,
 :host([media-range="L"]) .ui5-bar-startcontent-container {
-	padding-inline-start: 2rem;
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start_M_L);
 }
 
 :host([media-range="XL"]) .ui5-bar-startcontent-container {
-	padding-inline-start: 3rem;
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start_X_L);
 }
 
 :host([media-range="S"]) .ui5-bar-endcontent-container {
-	padding-inline-end: 1rem;
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
 }
 
 :host([media-range="M"]) .ui5-bar-endcontent-container,
 :host([media-range="L"]) .ui5-bar-endcontent-container {
-	padding-inline-end: 2rem;
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
 }
 
 :host([media-range="XL"]) .ui5-bar-endcontent-container {
-	padding-inline-end: 3rem;
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Bar-parameters.css b/packages/main/src/themes/base/Bar-parameters.css
index abf43d2b7987..919d0ed653ee 100644
--- a/packages/main/src/themes/base/Bar-parameters.css
+++ b/packages/main/src/themes/base/Bar-parameters.css
@@ -1,8 +1,12 @@
 :root {
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
-	--_ui5_bar-start-container-padding-start: 0.75rem;
+	--_ui5_bar-start-container-padding-start_S: 1rem;
+	--_ui5_bar-start-container-padding-start_M_L: 2rem;
+	--_ui5_bar-start-container-padding-start_XL: 3rem;
 	--_ui5_bar-mid-container-padding-start-end: 0.5rem;
-	--_ui5_bar-end-container-padding-end: 0.75rem;
+	--_ui5_bar-end-container-padding-end_S: 1rem;
+	--_ui5_bar-end-container-padding-end_M_L: 2rem;
+	--_ui5_bar-end-container-padding-end_XL: 3rem;
 	--_ui5_bar_subheader_margin-top: -0.0625rem;
 }
\ No newline at end of file

From 64e054c298691b5acc457572371c5b127ab46a79 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 5 Sep 2024 14:22:35 +0300
Subject: [PATCH 3/9] fix: adjust paddings in a dialog

---
 packages/main/src/themes/Bar.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index 7bfbe64a6d0c..e79e8a955774 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -24,10 +24,6 @@
 	justify-content: flex-start;
 }
 
-.ui5-bar-root .ui5-bar-content-container {
-	min-width: 30%;
-}
-
 .ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
 	min-width: 0px;
 	overflow: hidden;

From 63b5ceb7906af251f9f0a7139b806d8f169e41cc Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 10 Sep 2024 19:31:43 +0300
Subject: [PATCH 4/9] fix: adjust left padding on large screen

---
 packages/main/src/themes/Bar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index e79e8a955774..b02638097871 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -77,7 +77,7 @@
 }
 
 :host([media-range="XL"]) .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start_X_L);
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start_XL);
 }
 
 :host([media-range="S"]) .ui5-bar-endcontent-container {

From dcbae2969a3cc1e16397c6d2d181918ed48cabf7 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 10 Sep 2024 20:33:53 +0300
Subject: [PATCH 5/9] fix: remove redundant selector

---
 packages/main/src/themes/Bar.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index b02638097871..ff09ef5ec467 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -66,8 +66,7 @@
 	margin: 0 0.25rem;
 }
 
-:host([media-range="S"]) .ui5-bar-startcontent-container,
-:host([media-range="S"]) .ui5-bar-endcontent-container {
+:host([media-range="S"]) .ui5-bar-startcontent-container {
 	padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
 }
 

From 75a485d024ea40c237cac362b2c0f40b16777c80 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Tue, 10 Sep 2024 20:48:03 +0300
Subject: [PATCH 6/9] fix: chaning to container queries usage

---
 packages/main/src/Bar.ts         | 10 --------
 packages/main/src/themes/Bar.css | 42 +++++++++++++++++---------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index ec475671144e..6bbc54b1f409 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -4,7 +4,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import type BarDesign from "./types/BarDesign.js";
 
 // Template
@@ -84,13 +83,6 @@ class Bar extends UI5Element {
 	@slot({ type: HTMLElement })
 	endContent!: Array<HTMLElement>
 
-	/**
-	 * Defines the current media query size.
-	 * @private
-	 */
-	@property()
-	mediaRange?: string;
-
 	_handleResizeBound: () => void;
 
 	get accInfo() {
@@ -108,8 +100,6 @@ class Bar extends UI5Element {
 	handleResize() {
 		const bar = this.getDomRef()!;
 		const barWidth = bar.offsetWidth;
-		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, barWidth);
-
 		const needShrinked = Array.from(bar.children).some(child => {
 			return (child as HTMLElement).offsetWidth > barWidth / 3;
 		});
diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index ff09ef5ec467..48eeea1e662b 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -7,6 +7,7 @@
 }
 
 .ui5-bar-root {
+	container-type: size;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -66,28 +67,29 @@
 	margin: 0 0.25rem;
 }
 
-:host([media-range="S"]) .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
+@container (width < 600px) {
+	.ui5-bar-startcontent-container {
+		padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
+	}
+	.ui5-bar-endcontent-container {
+		padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
+	}
 }
 
-:host([media-range="M"]) .ui5-bar-startcontent-container,
-:host([media-range="L"]) .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start_M_L);
+@container (width > 599px) and (width < 1440px) {
+	.ui5-bar-startcontent-container {
+		padding-inline-start: var(--_ui5_bar-start-container-padding-start_M_L);
+	}
+	.ui5-bar-endcontent-container {
+		padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
+	}
 }
 
-:host([media-range="XL"]) .ui5-bar-startcontent-container {
-	padding-inline-start: var(--_ui5_bar-start-container-padding-start_XL);
+@container (width > 1439px) {
+	.ui5-bar-startcontent-container {
+		padding-inline-start: var(--_ui5_bar-start-container-padding-start_XL);
+	}
+	.ui5-bar-endcontent-container {
+		padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
+	}
 }
-
-:host([media-range="S"]) .ui5-bar-endcontent-container {
-	padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
-}
-
-:host([media-range="M"]) .ui5-bar-endcontent-container,
-:host([media-range="L"]) .ui5-bar-endcontent-container {
-	padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
-}
-
-:host([media-range="XL"]) .ui5-bar-endcontent-container {
-	padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
-}
\ No newline at end of file

From ea35d3a282a3cf95fb0efffd1eb810befd0884d4 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Wed, 25 Sep 2024 16:20:03 +0300
Subject: [PATCH 7/9] fix: retrieve removed selector

---
 packages/main/src/themes/Bar.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index 48eeea1e662b..408c5cbe65c6 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -74,6 +74,11 @@
 	.ui5-bar-endcontent-container {
 		padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
 	}
+	.ui5-bar-root .ui5-bar-content-container {
+		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_S)
+								 + var(--_ui5_bar-end-container-padding-end_S)
+							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	}
 }
 
 @container (width > 599px) and (width < 1440px) {
@@ -83,6 +88,11 @@
 	.ui5-bar-endcontent-container {
 		padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
 	}
+	.ui5-bar-root .ui5-bar-content-container {
+		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_M_L)
+								 + var(--_ui5_bar-end-container-padding-end_M_L)
+							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	}
 }
 
 @container (width > 1439px) {
@@ -92,4 +102,9 @@
 	.ui5-bar-endcontent-container {
 		padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
 	}
+	.ui5-bar-root .ui5-bar-content-container {
+		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_XL)
+								 + var(--_ui5_bar-end-container-padding-end_XL)
+							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	}
 }

From 7793d0f930de398b1d1562810ee4e249454ca880 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Fri, 27 Sep 2024 11:39:14 +0300
Subject: [PATCH 8/9] fix: extract changing parameters to variables

---
 packages/main/src/themes/Bar.css              | 49 +++++++------------
 .../main/src/themes/base/Bar-parameters.css   |  4 +-
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index 408c5cbe65c6..eaa722d44a2b 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -19,12 +19,19 @@
 }
 
 .ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: flex-start;
 }
 
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
+							 + var(--_ui5_bar-end-container-padding-end)
+						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+}
+
 .ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
 	min-width: 0px;
 	overflow: hidden;
@@ -32,6 +39,7 @@
 }
 
 .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;
@@ -68,43 +76,22 @@
 }
 
 @container (width < 600px) {
-	.ui5-bar-startcontent-container {
-		padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
-	}
-	.ui5-bar-endcontent-container {
-		padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
-	}
-	.ui5-bar-root .ui5-bar-content-container {
-		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_S)
-								 + var(--_ui5_bar-end-container-padding-end_S)
-							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	* {
+		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_S);
+		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_S)
 	}
 }
 
 @container (width > 599px) and (width < 1440px) {
-	.ui5-bar-startcontent-container {
-		padding-inline-start: var(--_ui5_bar-start-container-padding-start_M_L);
-	}
-	.ui5-bar-endcontent-container {
-		padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
-	}
-	.ui5-bar-root .ui5-bar-content-container {
-		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_M_L)
-								 + var(--_ui5_bar-end-container-padding-end_M_L)
-							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+	* {
+		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_M_L);
+		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_M_L);
 	}
 }
 
 @container (width > 1439px) {
-	.ui5-bar-startcontent-container {
-		padding-inline-start: var(--_ui5_bar-start-container-padding-start_XL);
-	}
-	.ui5-bar-endcontent-container {
-		padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
+	* {
+		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_XL);
+		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_XL);
 	}
-	.ui5-bar-root .ui5-bar-content-container {
-		min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start_XL)
-								 + var(--_ui5_bar-end-container-padding-end_XL)
-							  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
-	}
-}
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Bar-parameters.css b/packages/main/src/themes/base/Bar-parameters.css
index 919d0ed653ee..4f8c4eced322 100644
--- a/packages/main/src/themes/base/Bar-parameters.css
+++ b/packages/main/src/themes/base/Bar-parameters.css
@@ -1,10 +1,12 @@
 :root {
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
+	--_ui5_bar-start-container-padding-start: unset;
+	--_ui5_bar-mid-container-padding-start-end: 0.5rem;
+	--_ui5_bar-end-container-padding-end: unset;
 	--_ui5_bar-start-container-padding-start_S: 1rem;
 	--_ui5_bar-start-container-padding-start_M_L: 2rem;
 	--_ui5_bar-start-container-padding-start_XL: 3rem;
-	--_ui5_bar-mid-container-padding-start-end: 0.5rem;
 	--_ui5_bar-end-container-padding-end_S: 1rem;
 	--_ui5_bar-end-container-padding-end_M_L: 2rem;
 	--_ui5_bar-end-container-padding-end_XL: 3rem;

From 22bec78d0796b8d67d8f4e16c867d6b6f3bd8515 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Fri, 27 Sep 2024 11:54:06 +0300
Subject: [PATCH 9/9] fix: set default paddings for middle sized screens

---
 packages/main/src/themes/Bar.css                 | 8 --------
 packages/main/src/themes/base/Bar-parameters.css | 6 ++----
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/main/src/themes/Bar.css b/packages/main/src/themes/Bar.css
index eaa722d44a2b..f83871affce9 100644
--- a/packages/main/src/themes/Bar.css
+++ b/packages/main/src/themes/Bar.css
@@ -81,14 +81,6 @@
 		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_S)
 	}
 }
-
-@container (width > 599px) and (width < 1440px) {
-	* {
-		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_M_L);
-		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_M_L);
-	}
-}
-
 @container (width > 1439px) {
 	* {
 		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_XL);
diff --git a/packages/main/src/themes/base/Bar-parameters.css b/packages/main/src/themes/base/Bar-parameters.css
index 4f8c4eced322..60a3a4fc1581 100644
--- a/packages/main/src/themes/base/Bar-parameters.css
+++ b/packages/main/src/themes/base/Bar-parameters.css
@@ -1,14 +1,12 @@
 :root {
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
-	--_ui5_bar-start-container-padding-start: unset;
+	--_ui5_bar-start-container-padding-start: 2rem;
 	--_ui5_bar-mid-container-padding-start-end: 0.5rem;
-	--_ui5_bar-end-container-padding-end: unset;
+	--_ui5_bar-end-container-padding-end: 2rem;
 	--_ui5_bar-start-container-padding-start_S: 1rem;
-	--_ui5_bar-start-container-padding-start_M_L: 2rem;
 	--_ui5_bar-start-container-padding-start_XL: 3rem;
 	--_ui5_bar-end-container-padding-end_S: 1rem;
-	--_ui5_bar-end-container-padding-end_M_L: 2rem;
 	--_ui5_bar-end-container-padding-end_XL: 3rem;
 	--_ui5_bar_subheader_margin-top: -0.0625rem;
 }
\ No newline at end of file