poc(ui5-shellbar): apply old spacings to shellbar's branding

packages/fiori/src/ShellBar.ts

@@ -1446,14 +1446,23 @@ class ShellBar extends UI5Element {
 	}
 
 	get showStartSeparator(): boolean {
+		if (this.isSBreakPoint) {
+			return false;
+		}
 		return this.startContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
 	}
 
 	get showEndSeparator(): boolean {
+		if (this.isSBreakPoint) {
+			return false;
+		}
 		return this.endContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
 	}
 
 	shouldIncludeSeparator(itemInfo: IShellBarContentItem | undefined, contentInfo: IShellBarContentItem[]) {
+		if (this.isSBreakPoint) {
+			return false;
+		}
 		// once the last item from the start/end content was hidden, the
 		// separator is "packed" with it in order to account for any next measurements
 		if (!itemInfo) {

packages/fiori/src/themes/NavigationLayout.css

@@ -60,5 +60,5 @@
 }
 
 :host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
-	padding-inline: 0.875rem 1rem;
+	padding-inline: 0.875rem;
 }

packages/fiori/src/themes/ShellBar.css

@@ -300,14 +300,18 @@ slot[name="profile"] {
 	border-radius: var(--_ui5_shellbar_image_button_border_radius);
 }
 
+:host([breakpoint-size="S"]) .ui5-shellbar-image-button {
+	margin-inline-start: 6px;
+}
+
 .ui5-shellbar-overflow-container-left {
 	padding: 0;
 	justify-content: flex-start;
 	max-width: 75%;
 	flex-shrink: 0;
 }
 
-.ui5-shellbar-overflow-container-left > :nth-child(n) {
+.ui5-shellbar-overflow-container-left > :nth-child(n):not(.ui5-shellbar-logo) {
 	margin-inline-end: 0.5rem;
 }
 

packages/fiori/src/themes/ShellBarBranding.css

@@ -10,16 +10,17 @@
 	overflow: hidden;
 	display: flex;
 	align-items: center;
-	padding-block: 0.25rem;
-	padding-inline: 0.25rem 0.5rem;
 	box-sizing: border-box;
 	cursor: pointer;
 	background: var(--sapButton_Lite_Background);
 	border: 1px solid var(--sapButton_Lite_BorderColor);
 	color: var(--sapShell_TextColor);
-	/* fix cutting of the focus outline */
-	margin-inline-start: 0.125rem;
-	margin-inline-end: .5rem;
+}
+
+:host(:not([_is-sbreak-point])) .ui5-shellbar-branding-root {
+	padding-block: 0.25rem;
+	padding-inline: 0.25rem 0.5rem;
+	margin-inline-end: .25rem;
 }
 
 .ui5-shellbar-branding-root:focus {
@@ -67,6 +68,9 @@
 
 ::slotted([slot="logo"]) {
 	max-height: 2rem;
+}
+
+:host(:not([_is-sbreak-point])) ::slotted([slot="logo"]) {
 	padding-inline: 0.25rem;
 }