diff --git a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts index adb7ceea0d..5c2d0fed1d 100644 --- a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts +++ b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts @@ -62,6 +62,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement { ? html` ${this._styleElement}
${repeat( this._areas, diff --git a/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index 7e763cf82c..ffa931e21a 100644 --- a/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -438,15 +438,14 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen } #createButton { - padding-top: 1px; grid-template-columns: 1fr auto; display: grid; } - // Only when we are n an area, we like to hide the button on drag + /* Only when we are n an area, we like to hide the button on drag */ :host([area-key]) #createButton { - --umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) none; - display: var(--umb-block-grid--is-dragging--variable, grid); + --umb-block-grid--create-button--is-dragging--variable: var(--umb-block-grid--is-dragging) none; + display: var(--umb-block-grid--create-button--is-dragging--variable, grid); } :host(:not([pristine]):invalid) #createButton { --uui-button-contrast: var(--uui-color-danger); @@ -457,9 +456,17 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen } .umb-block-grid__layout-container[data-area-length='0'] { - --umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) 1; - min-height: calc(var(--umb-block-grid--is-dragging--variable, 0) * var(--uui-size-11)); - border: calc(var(--umb-block-grid--is-dragging--variable, 0) * 1px) dashed var(--uui-color-border); + --umb-block-grid--layout-container--is-dragging--variable: var(--umb-block-grid--is-dragging) 1; + min-height: calc(var(--umb-block-grid--layout-container--is-dragging--variable, 0) * var(--uui-size-11)); + } + + .umb-block-grid__layout-container[data-area-length='0']::after { + content: ''; + position: absolute; + inset: 0; + top: 1px; + border: calc(var(--umb-block-grid--layout-container--is-dragging--variable, 0) * 1px) dashed + var(--uui-color-border); border-radius: var(--uui-border-radius); } `, diff --git a/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts index 8e173fd0d8..f72910da99 100644 --- a/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts +++ b/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts @@ -117,6 +117,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement ? html`${this._styleElement}
${repeat( this.value,