Reposition workspace entity actions

src/Umbraco.Web.UI.Client/src/packages/content/content-type/global-components/content-type-workspace-editor-header.element.ts

@@ -126,15 +126,16 @@ export class UmbContentTypeWorkspaceEditorHeaderElement extends UmbLitElement {
 				display: flex;
 				flex: 1 1 auto;
 				flex-direction: column;
-				gap: var(--uui-size-space-1);
 			}
 
 			#name {
 				width: 100%;
+				z-index: 1;
 			}
 
 			#description {
 				width: 100%;
+				margin-top: 1px;
 				--uui-input-height: var(--uui-size-8);
 				--uui-input-border-color: transparent;
 			}
@@ -147,6 +148,8 @@ export class UmbContentTypeWorkspaceEditorHeaderElement extends UmbLitElement {
 				font-size: var(--uui-size-8);
 				height: 60px;
 				width: 60px;
+				--uui-button-border-color: transparent;
+				--uui-button-border-color-hover: var(--uui-color-border);
 			}
 		`,
 	];

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

@@ -101,20 +101,20 @@ export class UmbBodyLayoutElement extends LitElement {
 						this._headerSlotHasChildren = this.#hasNodes(e);
 						this.#setSlotVisibility(e.target as HTMLElement, this._headerSlotHasChildren);
 					}}></slot>
-				<slot
-					id="navigation-slot"
-					name="navigation"
-					@slotchange=${(e: Event) => {
-						this._navigationSlotHasChildren = this.#hasNodes(e);
-						this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren);
-					}}></slot>
 				<slot
 					id="action-menu-slot"
 					name="action-menu"
 					@slotchange=${(e: Event) => {
 						this._actionsMenuSlotHasChildren = this.#hasNodes(e);
 						this.#setSlotVisibility(e.target as HTMLElement, this._actionsMenuSlotHasChildren);
 					}}></slot>
+				<slot
+					id="navigation-slot"
+					name="navigation"
+					@slotchange=${(e: Event) => {
+						this._navigationSlotHasChildren = this.#hasNodes(e);
+						this.#setSlotVisibility(e.target as HTMLElement, this._navigationSlotHasChildren);
+					}}></slot>
 			</div>
 
 			<!-- This div should be changed for the uui-scroll-container when it gets updated -->
@@ -204,7 +204,6 @@ export class UmbBodyLayoutElement extends LitElement {
 				box-sizing: border-box;
 				min-width: 0;
 			}
-
 			#navigation-slot {
 				margin-left: auto;
 			}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -90,9 +90,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 			<umb-body-layout main-no-padding .headline=${this.headline} ?loading=${this.loading}>
 				${this.#renderBackButton()}
 				<slot name="header" slot="header"></slot>
-				${this.#renderViews()}
 				<slot name="action-menu" slot="action-menu"></slot>
-				${this.#renderRoutes()}
+				${this.#renderViews()} ${this.#renderRoutes()}
 				<slot></slot>
 				${when(
 					!this.enforceNoFooter,

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts

@@ -56,10 +56,10 @@ export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
 			? html`
 					<uui-button
 						id="action-button"
+						data-mark="workspace:action-menu-button"
 						popovertarget="workspace-entity-action-menu-popover"
 						label=${this.localize.term('general_actions')}>
-						${this.localize.term('general_actions')}
-						<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
+						<uui-symbol-more></uui-symbol-more>
 					</uui-button>
 					<uui-popover-container
 						id="workspace-entity-action-menu-popover"
@@ -84,8 +84,8 @@ export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
 		css`
 			:host {
 				height: 100%;
+				margin-left: calc(var(--uui-size-layout-1) * -1);
 			}
-
 			:host > uui-button {
 				height: 100%;
 			}

src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/webhook-workspace-editor.element.ts

@@ -74,10 +74,12 @@ export class UmbWebhookWorkspaceEditorElement extends UmbLitElement {
 
 			#name {
 				width: 100%;
+				z-index: 1;
 			}
 
 			#description {
 				width: 100%;
+				margin-top: -1px;
 				--uui-input-height: var(--uui-size-8);
 				--uui-input-border-color: transparent;
 			}

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.33",
-    "@umbraco/playwright-testhelpers": "^16.0.7",
+    "@umbraco/playwright-testhelpers": "^16.0.9",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/MemberGroups.spec.ts

@@ -58,7 +58,7 @@ test('can delete a member group', {tag: '@smoke'}, async ({umbracoApi, umbracoUi
 
   // Act
   await umbracoUi.memberGroup.clickMemberGroupLinkByName(memberGroupName);
-  await umbracoUi.memberGroup.clickActionsButton();
+  await umbracoUi.memberGroup.clickActionButton();
   await umbracoUi.memberGroup.clickDeleteButton();
   await umbracoUi.memberGroup.clickConfirmToDeleteButton();
 

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Members/Members.spec.ts

@@ -217,7 +217,7 @@ test('can delete member', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
 
   // Act
   await umbracoUi.member.clickMemberLinkByName(memberName);
-  await umbracoUi.memberGroup.clickActionsButton();
+  await umbracoUi.memberGroup.clickActionButton();
   await umbracoUi.memberGroup.clickDeleteButton();
   await umbracoUi.memberGroup.clickConfirmToDeleteButton();
 

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Users/UserGroups.spec.ts

@@ -115,7 +115,7 @@ test('can delete a user group', async ({umbracoApi, umbracoUi}) => {
   await umbracoUi.userGroup.clickUserGroupWithName(userGroupName);
 
   // Act
-  await umbracoUi.userGroup.clickActionsButton();
+  await umbracoUi.userGroup.clickActionButton();
   await umbracoUi.userGroup.clickDeleteButton();
   await umbracoUi.userGroup.clickConfirmToDeleteButton();