fix: Prevent edit modal opening on grid block resize and re-render after layout change

Two fixes for block grid resize interactions:

1. Drag detection: Track pointerdown position on the preview <a> tag
   and compare with click position. If the pointer moved >5px or no
   pointerdown was recorded (resize drag ended over the element),
   suppress navigation. Keyboard activation is unaffected.

2. Re-render on resize: Detect columnSpan/rowSpan changes in the
   entry context observer and trigger a debounced (300ms) re-render
   with updated layout data, so the server-rendered preview reflects
   the new dimensions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rickbutterfield

src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-grid-preview.custom-view.element.ts

@@ -101,6 +101,9 @@ export class BlockGridPreviewCustomView extends BlockPreviewBaseElement<BlockGri
                         layout,
                         layoutAreas
                     ]) => {
+                        const prevColumnSpan = this._blockContext.layout?.columnSpan;
+                        const prevRowSpan = this._blockContext.layout?.rowSpan;
+
                         this._blockContext.contentUdi = contentUdi ?? '';
                         this._blockContext.settingsUdi = settingsUdi ?? '';
                         this._blockContext.workspaceEditContentPath = workspaceEditContentPath ?? '';
@@ -114,13 +117,29 @@ export class BlockGridPreviewCustomView extends BlockPreviewBaseElement<BlockGri
                             this.#managerObserved = true;
                             await this.#observeBlockPropertyValue();
                         }
+
+                        // Re-render when layout dimensions change (resize)
+                        if (this._htmlMarkup && layout && (
+                            layout.columnSpan !== prevColumnSpan ||
+                            layout.rowSpan !== prevRowSpan
+                        )) {
+                            this.blockGridValue = {
+                                ...this._blockGridValue,
+                                layout: { ['Umbraco.BlockGrid']: this.#filterLayouts() }
+                            };
+                            clearTimeout(this.#layoutResizeTimer);
+                            this.#layoutResizeTimer = setTimeout(() => {
+                                this.renderBlockPreview();
+                            }, 300);
+                        }
                     }
                 );
             }
         });
     }
 
     #managerObserved = false;
+    #layoutResizeTimer?: ReturnType<typeof setTimeout>;
 
     async #observeBlockPropertyValue() {
         this.consumeContext(UMB_BLOCK_GRID_MANAGER_CONTEXT, (context) => {

src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-preview-base.element.ts

@@ -58,6 +58,9 @@ export abstract class BlockPreviewBaseElement<TContext extends BlockContext = Bl
 
     protected _isConnected: boolean = false;
 
+    /** Tracks pointerdown position on the <a> tag to distinguish clicks from drags. */
+    private _pointerStartPos: { x: number; y: number } | null = null;
+
     /** Subclass provides a concrete block context object with block-type-specific fields. */
     protected abstract _blockContext: TContext;
 
@@ -258,7 +261,34 @@ export abstract class BlockPreviewBaseElement<TContext extends BlockContext = Bl
         return match ? match[1] : '';
     }
 
+    protected _handlePointerDown(event: PointerEvent) {
+        this._pointerStartPos = { x: event.clientX, y: event.clientY };
+    }
+
     protected _handleClick(event: PointerEvent) {
+        // Detect drag/resize interactions: if the pointer moved significantly between
+        // pointerdown and click, suppress the navigation. This prevents the edit modal
+        // from opening when the user finishes resizing a grid block.
+        const pointerType = 'pointerType' in event ? (event as PointerEvent).pointerType : '';
+        if (pointerType !== '') {
+            if (!this._pointerStartPos) {
+                // Pointer click with no corresponding pointerdown on this element —
+                // likely a resize/drag that ended over our <a> tag.
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            const dx = Math.abs(event.clientX - this._pointerStartPos.x);
+            const dy = Math.abs(event.clientY - this._pointerStartPos.y);
+            this._pointerStartPos = null;
+            if (dx > 5 || dy > 5) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+        }
+        this._pointerStartPos = null;
+
         const path = event.composedPath();
 
         // Check for clicks on action bars or resize handlers.
@@ -309,6 +339,7 @@ export abstract class BlockPreviewBaseElement<TContext extends BlockContext = Bl
                     : this._htmlMarkup
                         ? html`<a
                             href=${ifDefined(this._blockContext.workspaceEditContentPath)}
+                            @pointerdown=${this._handlePointerDown}
                             @click=${this._handleClick}
                             aria-label=${this.localize.term('blockPreview_editBlock')}
                             class="block-preview-edit"