Merge pull request #1037 from umbraco/bugfix/layout-issues

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

@@ -7,15 +7,9 @@ import { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extensi
 
 @customElement('umb-backoffice-header-sections')
 export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
-	@state()
-	private _open = false;
-
 	@state()
 	private _sections: Array<UmbExtensionManifestInitializer<ManifestSection>> = [];
 
-	@state()
-	private _extraSections: Array<ManifestSection> = [];
-
 	@state()
 	private _currentSectionAlias = '';
 
@@ -31,18 +25,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		});
 	}
 
-	private _handleMore(e: MouseEvent) {
-		e.stopPropagation();
-		this._open = !this._open;
-	}
-
-	private _handleLabelClick() {
-		const moreTab = this.shadowRoot?.getElementById('moreTab');
-		moreTab?.setAttribute('active', 'true');
-
-		this._open = false;
-	}
-
 	private _observeSections() {
 		if (!this._backofficeContext) return;
 
@@ -72,64 +54,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);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts

@@ -1,4 +1,4 @@
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	css,
 	html,
@@ -191,6 +191,7 @@ export class UmbBodyLayoutElement extends LitElement {
 				height: 100%;
 				align-items: center;
 				box-sizing: border-box;
+				min-width: 0;
 			}
 
 			#navigation-slot,

src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts

@@ -1,4 +1,4 @@
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-section-main')
@@ -17,6 +17,7 @@ export class UmbSectionMainElement extends LitElement {
 			:host {
 				flex: 1 1 auto;
 				height: 100%;
+				min-width: 0;
 			}
 
 			main {