Block Grid: Fix inline create button width not updating on workspace resize (closes #22527)

[engijlr]

Summary

• The <uui-button-inline-create> element had its width measured once at render time and applied as an inline style, which was never updated when the workspace was resized
• Added a ResizeObserver on the layout container to re-measure and update the width whenever the container changes size
• Added disconnectedCallback to disconnect the observer

How to test:

1. Create a Document Type with a Block Grid property configured with 4 columns
2. Add a block type with column span options
3. Create a content node and add 3+ blocks
4. Hover between blocks, verify the inline create line spans the full container width
5. Drag the content tree panel wider/narrower to resize the workspace
6. Verify no horizontal scrollbar appears in the block grid
7. Hover between blocks again after resize, verify the inline create line still spans the full container width

Fixes #22527

[claude]

Claude finished @engijlr's task in 3m 18s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: cf6051ef · Skipped: 0 noise files out of 1 total

Adds a ResizeObserver on the Block Grid layout container so the inline create button width is recalculated whenever the container resizes, fixing the stale width that caused horizontal overflow after workspace resize.

---

Important

• block-grid-entry.element.ts:352: No tests added. Coding preferences require blackbox tests for changed code. For a ResizeObserver-driven fix, a browser-environment test using ResizeObserver mock or a Lit component test verifying the observer is wired up and torn down would provide coverage. Fix this →

Suggestions

• block-grid-entry.element.ts:358: Missing destroy() override. The only other component in the codebase using ResizeObserver — scrollable-container.element.ts — also overrides destroy() to disconnect the observer alongside disconnectedCallback(). The destroy() hook is the Umbraco element teardown path (e.g. on route changes) and can be called independently of the DOM lifecycle. Without it, the observer survives explicit element teardown until GC.

  override destroy(): void {
      this.#layoutContainerResizeObserver?.disconnect();
      this.#layoutContainerResizeObserver = undefined;
      super.destroy();
  }

• block-grid-entry.element.ts:352: Observer re-instantiated on each reconnect. The sibling pattern (see scrollable-container.element.ts:12) initialises #resizeObserver once as a class field and calls .observe() / .disconnect() per lifecycle event. The PR creates a new ResizeObserver (plus a new .bind(this) closure) every time connectedCallback fires. Consider initialising the observer as a class field and only calling .observe() / .disconnect() in the lifecycle hooks.

  // class field:
  #layoutContainerResizeObserver = new ResizeObserver(this.#callUpdateInlineCreateButtons.bind(this));
  
  // in connectedCallback — replace the creation block with:
  if (this.parentElement) {
      this.#layoutContainerResizeObserver.observe(this.parentElement);
  }
  
  // in disconnectedCallback:
  this.#layoutContainerResizeObserver.disconnect();
  // (no need to set to undefined since it's a fixed instance)

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestions.

Labels applied: area/frontend, category/ux

[AndyButland]

Works nicely @engijlr - I've tested, replicate the issue before the fix and confirmed that it's resolved afterwards.

[AndyButland]

Cherry picked into release/17.5.0 and release/18.0.