fix header colors and layout

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -72,64 +72,30 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 							?active="${this._currentSectionAlias === section.alias}"
 							href="${`section/${section.manifest?.meta.pathname}`}"
 							label="${section.manifest?.meta.label ?? section.manifest?.name ?? ''}"></uui-tab>
-					`
+					`,
 				)}
-				${this._renderExtraSections()}
 			</uui-tab-group>
 		`;
 	}
 
-	private _renderExtraSections() {
-		return when(
-			this._extraSections.length > 0,
-			() => html`
-				<uui-tab id="moreTab">
-					<uui-popover .open=${this._open} placement="bottom-start" @close="${() => (this._open = false)}">
-						<uui-button slot="trigger" look="primary" label="More" @click="${this._handleMore}" compact>
-							<uui-symbol-more></uui-symbol-more>
-						</uui-button>
-
-						<div slot="popover" id="dropdown">
-							${this._extraSections.map(
-								(section) => html`
-									<uui-menu-item
-										?active="${this._currentSectionAlias === section.alias}"
-										label="${section.meta.label || section.name}"
-										@click-label="${this._handleLabelClick}"></uui-menu-item>
-								`
-							)}
-						</div>
-					</uui-popover>
-				</uui-tab>
-			`
-		);
-	}
-
 	render() {
 		return html` ${this._renderSections()} `;
 	}
 
 	static styles: CSSResultGroup = [
 		css`
+			:host {
+				display: contents;
+			}
 			#tabs {
-				color: var(--uui-color-header-contrast);
 				height: 60px;
+				flex-basis: 100%;
 				font-size: 16px;
 				--uui-tab-text: var(--uui-color-header-contrast);
 				--uui-tab-text-hover: var(--uui-color-header-contrast-emphasis);
 				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
-				--uui-tab-background: var(--uui-color-header-background);
-			}
-
-			#dropdown {
-				background-color: white;
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				min-width: 200px;
-				color: black; /* Change to variable */
+				background-color: var(--uui-color-header-background);
+				--uui-tab-group-dropdown-background: var(--uui-color-header-surface);
 			}
 		`,
 	];