@umbraco-cms/backoffice 1.0.0-next.af81f4c7 → 1.0.0-next.b2711768

package/dist-cms/css/umb-css.css

@@ -2,4 +2,5 @@
 	--uui-color-positive: #1c874c;
 	--umb-footer-layout-height: 54px;
 	--umb-header-layout-height: 70px;
+	--umb-section-sidebar-width: 300px;
 }

package/dist-cms/custom-elements.json

@@ -551,11 +551,15 @@
         },
         {
           "name": "footer",
-          "description": "Slot for workspace footer"
+          "description": "Slot for footer element"
+        },
+        {
+          "name": "footer-info",
+          "description": "Slot for info in the footer"
         },
         {
           "name": "actions",
-          "description": "Slot for workspace footer actions"
+          "description": "Slot for actions in the footer"
         },
         {
           "name": "default",

package/dist-cms/packages/core/collection/collection.element.js

@@ -67,7 +67,7 @@ let UmbCollectionElement = class UmbCollectionElement extends UmbLitElement {
 				<umb-collection-toolbar slot="header"></umb-collection-toolbar>
 				<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>
 				${this._selection && this._selection.length > 0
-            ? html `<umb-collection-selection-actions slot="footer"></umb-collection-selection-actions>`
+            ? html `<umb-collection-selection-actions slot="footer-info"></umb-collection-selection-actions>`
             : nothing}
 			</umb-body-layout>
 		`;

package/dist-cms/packages/core/components/body-layout/body-layout.element.d.ts

@@ -4,8 +4,9 @@ import { LitElement } from '../../../../external/lit/index.js';
  * @description Layout element to arrange elements in a body layout. A general layout for most views.
  * @slot icon - Slot for icon
  * @slot name - Slot for name
- * @slot footer - Slot for workspace footer
- * @slot actions - Slot for workspace footer actions
+ * @slot footer - Slot for footer element
+ * @slot footer-info - Slot for info in the footer
+ * @slot actions - Slot for actions in the footer
  * @slot default - slot for main content
  * @export
  * @class UmbBodyLayout

package/dist-cms/packages/core/components/body-layout/body-layout.element.js

@@ -11,8 +11,9 @@ import { UUITextStyles } from '../../../../external/uui/index.js';
  * @description Layout element to arrange elements in a body layout. A general layout for most views.
  * @slot icon - Slot for icon
  * @slot name - Slot for name
- * @slot footer - Slot for workspace footer
- * @slot actions - Slot for workspace footer actions
+ * @slot footer - Slot for footer element
+ * @slot footer-info - Slot for info in the footer
+ * @slot actions - Slot for actions in the footer
  * @slot default - slot for main content
  * @export
  * @class UmbBodyLayout
@@ -29,6 +30,10 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
          * @default ''
          */
         this.headline = '';
+        /*
+        @property({ type: Boolean, attribute: 'no-scroll' })
+        public noScroll = false;
+    */
         this._headerSlotHasChildren = false;
         this._tabsSlotHasChildren = false;
         this._actionsMenuSlotHasChildren = false;
@@ -69,12 +74,19 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
             this._actionsMenuSlotHasChildren = this.#hasNodes(e);
         }}></slot>
 			</div>
-			<uui-scroll-container id="main">
-				<slot></slot>
-			</uui-scroll-container>
+			${
+        //this.noScroll
+        //? html`<slot></slot>`
+        //:
+        html `
+					<uui-scroll-container id="main">
+						<slot></slot>
+					</uui-scroll-container>
+				`}
+			<slot name="footer"></slot>
 			<umb-footer-layout style="display:${this._footerSlotHasChildren || this._actionsSlotHasChildren ? '' : 'none'}">
 				<slot
-					name="footer"
+					name="footer-info"
 					@slotchange=${(e) => {
             this._footerSlotHasChildren = this.#hasNodes(e);
         }}></slot>
@@ -98,6 +110,14 @@ let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
 				flex-direction: column;
 			}
 
+			/*
+			:host([no-scroll]) slot:not([name]) {
+				position: relative;
+				display: block;
+				height: 100%;
+			}
+			*/
+
 			#header {
 				display: flex;
 				align-items: center;

package/dist-cms/packages/core/components/data-type/data-type-property-collection.class.d.ts

@@ -5,6 +5,7 @@ import { DataTypePropertyPresentationModel } from '../../../../external/backend-
  */
 export declare class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresentationModel> {
     constructor(args?: Array<DataTypePropertyPresentationModel>);
+    static get [Symbol.species](): ArrayConstructor;
     getValueByAlias<T>(alias: string): T | undefined;
     getByAlias(alias: string): DataTypePropertyPresentationModel | undefined;
 }

package/dist-cms/packages/core/components/data-type/data-type-property-collection.class.js

@@ -6,6 +6,9 @@ export class UmbDataTypePropertyCollection extends Array {
     constructor(args = []) {
         super(...args);
     }
+    static get [Symbol.species]() {
+        return Array;
+    }
     getValueByAlias(alias) {
         const property = this.getByAlias(alias);
         if (property?.value === undefined || property?.value === null) {

package/dist-cms/packages/core/components/footer-layout/footer-layout.element.js

@@ -30,7 +30,7 @@ let UmbFooterLayoutElement = class UmbFooterLayoutElement extends LitElement {
 				align-items: center;
 				justify-content: space-between;
 				width: 100%;
-				height: 54px; /* TODO: missing var(--uui-size-18);*/
+				height: var(--umb-footer-layout-height);
 				border-top: 1px solid var(--uui-color-border);
 				background-color: var(--uui-color-surface);
 				box-sizing: border-box;

package/dist-cms/packages/core/components/table/table.element.js

@@ -181,8 +181,7 @@ let UmbTableElement = class UmbTableElement extends LitElement {
         UUITextStyles,
         css `
 			:host {
-				height: 100%;
-				overflow: auto;
+				height: fit-content;
 				padding: var(--uui-size-space-4);
 				padding-top: 0;
 			}

package/dist-cms/packages/core/modal/common/tree-picker/tree-picker-modal.element.js

@@ -51,10 +51,6 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbModal
     static { this.styles = [
         UUITextStyles,
         css `
-			:host {
-				--umb-header-layout-height: 70px;
-			}
-
 			uui-box {
 				margin: var(--uui-size-layout-1);
 			}

package/dist-cms/packages/core/section/section-main/section-main.element.js

@@ -22,8 +22,8 @@ let UmbSectionMainElement = class UmbSectionMainElement extends LitElement {
 				height: 100%;
 			}
 
-			main,
-			slot {
+			main {
+				position: relative;
 				display: flex;
 				flex-direction: column;
 				height: 100%;

package/dist-cms/packages/core/section/section-sidebar/section-sidebar.element.js

@@ -27,7 +27,7 @@ let UmbSectionSidebarElement = class UmbSectionSidebarElement extends UmbLitElem
         UUITextStyles,
         css `
 			:host {
-				flex: 0 0 300px;
+				flex: 0 0 var(--umb-section-sidebar-width);
 				background-color: var(--uui-color-surface);
 				height: 100%;
 				border-right: 1px solid var(--uui-color-border);

package/dist-cms/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.js

@@ -83,16 +83,25 @@ let UmbSectionSidebarContextMenuElement = class UmbSectionSidebarContextMenuElem
 			}
 			#action-modal {
 				position: absolute;
-				left: 300px;
+				left: var(--umb-section-sidebar-width);
 				height: 100%;
 				z-index: 1;
 				top: 0;
-				width: 300px;
+				width: var(--umb-section-sidebar-width);
 				border: none;
 				border-left: 1px solid var(--uui-color-border);
 				border-right: 1px solid var(--uui-color-border);
 				background-color: var(--uui-color-surface);
 			}
+
+			#action-modal h3 {
+				padding: var(--uui-size-4) var(--uui-size-8);
+				margin: 0;
+				min-height: var(--umb-header-layout-height);
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/core/section/section-views/section-views.element.js

@@ -79,16 +79,18 @@ let UmbSectionViewsElement = class UmbSectionViewsElement extends UmbLitElement
         return html `
 			${this._routes.length > 0
             ? html `
-						<div id="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
-						<umb-router-slot
-							.routes=${this._routes}
-							@init=${(event) => {
+						<umb-body-layout>
+							<div id="header" slot="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
+							<umb-router-slot
+								.routes=${this._routes}
+								@init=${(event) => {
                 this._routerPath = event.target.absoluteRouterPath;
             }}
-							@change=${(event) => {
+								@change=${(event) => {
                 this._activePath = event.target.localActiveViewPath;
             }}>
-						</umb-router-slot>
+							</umb-router-slot>
+						</umb-body-layout>
 				  `
             : nothing}
 		`;
@@ -125,6 +127,13 @@ let UmbSectionViewsElement = class UmbSectionViewsElement extends UmbLitElement
     static { this.styles = [
         UUITextStyles,
         css `
+			:host {
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
 			#header {
 				background-color: var(--uui-color-surface);
 				border-bottom: 1px solid var(--uui-color-divider-standalone);

package/dist-cms/packages/core/tree/index.d.ts

@@ -1,4 +1,3 @@
-export * from './context-menu/index.js';
 export * from './entity-tree-item/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-base/index.js';

package/dist-cms/packages/core/tree/index.js

@@ -1,4 +1,3 @@
-export * from './context-menu/index.js';
 export * from './entity-tree-item/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-base/index.js';

package/dist-cms/packages/core/tree/tree.element.d.ts

@@ -2,8 +2,6 @@ import { TreeItemPresentationModel } from '../../../external/backend-api/index.j
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import './tree-item/tree-item.element.js';
 import './tree-item-base/tree-item-base.element.js';
-import './context-menu/tree-context-menu-page.service.js';
-import './context-menu/tree-context-menu.service.js';
 export declare class UmbTreeElement extends UmbLitElement {
     #private;
     get alias(): string | undefined;

package/dist-cms/packages/core/tree/tree.element.js

@@ -9,8 +9,6 @@ import { html, nothing, customElement, property, state, repeat } from '../../../
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import './tree-item/tree-item.element.js';
 import './tree-item-base/tree-item-base.element.js';
-import './context-menu/tree-context-menu-page.service.js';
-import './context-menu/tree-context-menu.service.js';
 let UmbTreeElement = class UmbTreeElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/core/workspace/index.d.ts

@@ -1,6 +1,7 @@
 export * from './workspace-action/index.js';
 export * from './workspace-action-menu/index.js';
 export * from './workspace-editor/index.js';
+export * from './workspace-footer/index.js';
 export * from './workspace-context/index.js';
 export * from './workspace-variant/index.js';
 export * from './workspace-split-view-manager.class.js';

package/dist-cms/packages/core/workspace/index.js

@@ -1,6 +1,7 @@
 export * from './workspace-action/index.js';
 export * from './workspace-action-menu/index.js';
 export * from './workspace-editor/index.js';
+export * from './workspace-footer/index.js';
 export * from './workspace-context/index.js';
 export * from './workspace-variant/index.js';
 export * from './workspace-split-view-manager.class.js';

package/dist-cms/packages/core/workspace/workspace-editor/workspace-editor.element.js

@@ -104,8 +104,8 @@ let UmbWorkspaceEditorElement = class UmbWorkspaceEditorElement extends UmbLitEl
 				${this.enforceNoFooter
             ? ''
             : html `
-							<umb-workspace-footer alias=${this.alias}>
-								<slot name="footer"></slot>
+							<umb-workspace-footer slot="footer" alias=${this.alias}>
+								<slot name="footer-info"></slot>
 								<slot name="actions" slot="actions"></slot>
 							</umb-workspace-footer>
 					  `}

package/dist-cms/packages/core/workspace/workspace-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './workspace-footer.element.js';

package/dist-cms/packages/core/workspace/workspace-footer/index.js

@@ -0,0 +1 @@
+export * from './workspace-footer.element.js';

package/dist-cms/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UUITextStyles } from '../../../../external/uui/index.js';
+import { UUITextStyles, } from '../../../../external/uui/index.js';
 import { css, html, nothing, customElement, state, query, property } from '../../../../external/lit/index.js';
 import { UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -222,7 +222,7 @@ let UmbDashboardRedirectManagementElement = class UmbDashboardRedirectManagement
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			.actions {

package/dist-cms/packages/documents/document-types/workspace/document-type-workspace-editor.element.js

@@ -73,7 +73,7 @@ let UmbDocumentTypeWorkspaceEditorElement = class UmbDocumentTypeWorkspaceEditor
 					</uui-input>
 				</div>
 
-				<div slot="footer">
+				<div slot="footer-info">
 					<!-- TODO: Shortcuts Modal? -->
 					<uui-button label="Show keyboard shortcuts">
 						Keyboard Shortcuts

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.js

@@ -82,12 +82,14 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     static { this.styles = [
         UUITextStyles,
         css `
-			uui-box {
-				margin: var(--uui-size-layout-1);
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
 			}
 
 			#add {
 				width: 100%;
+				margin-top: var(--uui-size-layout-1);
 			}
 		`,
     ]; }

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.js

@@ -147,23 +147,27 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
     render() {
         return html `
 			<div id="workspace-tab-bar">${this._routerPath ? this.renderTabsNavigation() : ''}${this.renderActions()}</div>
-
-			<umb-router-slot
-				.routes=${this._routes}
-				@init=${(event) => {
+			<uui-scroll-container>
+				<umb-router-slot
+					.routes=${this._routes}
+					@init=${(event) => {
             this._routerPath = event.target.absoluteRouterPath;
         }}
-				@change=${(event) => {
+					@change=${(event) => {
             this._activePath = event.target.absoluteActiveViewPath || '';
         }}>
-			</umb-router-slot>
+				</umb-router-slot>
+			</uui-scroll-container>
 		`;
     }
     static { this.styles = [
         UUITextStyles,
         css `
 			:host {
-				display: block;
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
 			}
 

package/dist-cms/packages/documents/document-types/workspace/views/details/document-type-workspace-view-details.element.js

@@ -84,8 +84,9 @@ let UmbDocumentTypeWorkspaceViewDetailsElement = class UmbDocumentTypeWorkspaceV
     static { this.styles = [
         UUITextStyles,
         css `
-			uui-box {
-				margin: var(--uui-size-layout-1);
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
 			}
 
 			uui-label,

package/dist-cms/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.js

@@ -75,10 +75,10 @@ let UmbDocumentTypeWorkspaceViewStructureElement = class UmbDocumentTypeWorkspac
     static { this.styles = [
         UUITextStyles,
         css `
-			uui-box {
-				margin: var(--uui-size-layout-1);
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
 			}
-
 			uui-label,
 			umb-property-editor-ui-number {
 				display: block;

package/dist-cms/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.js

@@ -50,7 +50,7 @@ let UmbDocumentTypeWorkspaceViewTemplatesElement = class UmbDocumentTypeWorkspac
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			#templates {

package/dist-cms/packages/documents/documents/workspace/manifests.js

@@ -69,7 +69,7 @@ const workspaceActions = [
         type: 'workspaceAction',
         alias: 'Umb.WorkspaceAction.Document.SaveAndPublish',
         name: 'Save And Publish Document Workspace Action',
-        weight: 100,
+        weight: 70,
         meta: {
             label: 'Save And Publish',
             look: 'primary',
@@ -84,7 +84,7 @@ const workspaceActions = [
         type: 'workspaceAction',
         alias: 'Umb.WorkspaceAction.Document.Save',
         name: 'Save Document Workspace Action',
-        weight: 90,
+        weight: 80,
         meta: {
             label: 'Save',
             look: 'secondary',
@@ -98,7 +98,7 @@ const workspaceActions = [
         type: 'workspaceAction',
         alias: 'Umb.WorkspaceAction.Document.SaveAndPreview',
         name: 'Save And Preview Document Workspace Action',
-        weight: 80,
+        weight: 90,
         meta: {
             label: 'Save And Preview',
             api: UmbDocumentSaveAndPreviewWorkspaceAction,
@@ -111,7 +111,7 @@ const workspaceActions = [
         type: 'workspaceAction',
         alias: 'Umb.WorkspaceAction.Document.SaveAndSchedule',
         name: 'Save And Schedule Document Workspace Action',
-        weight: 70,
+        weight: 100,
         meta: {
             label: 'Save And Schedule',
             api: UmbSaveAndScheduleDocumentWorkspaceAction,

package/dist-cms/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.js

@@ -64,8 +64,9 @@ let UmbDocumentWorkspaceViewEditTabElement = class UmbDocumentWorkspaceViewEditT
     static { this.styles = [
         UUITextStyles,
         css `
-			uui-box {
-				margin: var(--uui-size-layout-1);
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
 			}
 		`,
     ]; }

package/dist-cms/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.js

@@ -199,7 +199,7 @@ let UmbDocumentInfoWorkspaceViewElement = class UmbDocumentInfoWorkspaceViewElem
 			:host {
 				display: grid;
 				gap: var(--uui-size-layout-1);
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 				grid-template-columns: 1fr 350px;
 			}
 

package/dist-cms/packages/members/dashboards/welcome/dashboard-members-welcome.element.js

@@ -23,7 +23,7 @@ let UmbDashboardMembersWelcomeElement = class UmbDashboardMembersWelcomeElement
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 		`,
     ]; }

package/dist-cms/packages/packages/package-section/views/created/packages-created-overview.element.js

@@ -103,7 +103,7 @@ let UmbPackagesCreatedOverviewElement = class UmbPackagesCreatedOverviewElement
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 			uui-box {
 				margin: var(--uui-size-space-5) 0;

package/dist-cms/packages/packages/package-section/views/installed/installed-packages-section-view.element.js

@@ -92,7 +92,7 @@ let UmbInstalledPackagesSectionViewElement = class UmbInstalledPackagesSectionVi
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 			uui-box {
 				margin-top: var(--uui-size-space-5);

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-overview.js

@@ -104,7 +104,7 @@ let UmbDashboardExamineOverviewElement = class UmbDashboardExamineOverviewElemen
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			uui-box + uui-box {

package/dist-cms/packages/settings/dashboards/health-check/views/health-check-overview.element.js

@@ -45,7 +45,7 @@ let UmbDashboardHealthCheckOverviewElement = class UmbDashboardHealthCheckOvervi
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			uui-box + uui-box {

package/dist-cms/packages/settings/dashboards/models-builder/dashboard-models-builder.element.js

@@ -120,7 +120,7 @@ let UmbDashboardModelsBuilderElement = class UmbDashboardModelsBuilderElement ex
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			.headline {

package/dist-cms/packages/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.js

@@ -85,7 +85,7 @@ let UmbDashboardPerformanceProfilingElement = class UmbDashboardPerformanceProfi
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			uui-toggle {

package/dist-cms/packages/settings/dashboards/published-status/dashboard-published-status.element.js

@@ -173,7 +173,7 @@ let UmbDashboardPublishedStatusElement = class UmbDashboardPublishedStatusElemen
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			uui-box + uui-box {

package/dist-cms/packages/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.js

@@ -96,7 +96,7 @@ let UmbDashboardSettingsWelcomeElement = class UmbDashboardSettingsWelcomeElemen
 				display: grid;
 				grid-gap: var(--uui-size-7);
 				grid-template-columns: repeat(3, 1fr);
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			@media (max-width: 1200px) {

package/dist-cms/packages/settings/dashboards/telemetry/dashboard-telemetry.element.js

@@ -117,7 +117,7 @@ let UmbDashboardTelemetryElement = class UmbDashboardTelemetryElement extends Um
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 		`,
     ]; }

package/dist-cms/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.js

@@ -95,7 +95,7 @@ let UmbDataTypeDetailsWorkspaceViewEditElement = class UmbDataTypeDetailsWorkspa
     }
     render() {
         return html `
-			<uui-box style="margin-bottom: var(--uui-size-space-5);"> ${this._renderPropertyEditorUI()} </uui-box>
+			<uui-box> ${this._renderPropertyEditorUI()} </uui-box>
 			${this._renderConfig()} </uui-box>
 		`;
     }
@@ -146,7 +146,7 @@ let UmbDataTypeDetailsWorkspaceViewEditElement = class UmbDataTypeDetailsWorkspa
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 		`,
     ]; }

package/dist-cms/packages/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.js

@@ -53,7 +53,7 @@ let UmbWorkspaceViewDataTypeInfoElement = class UmbWorkspaceViewDataTypeInfoElem
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 		`,
     ]; }