🤖 Preview components that use container queries at full width, inside a container

Fons Vandammerequested to merge
issue/canvas-3592158:3592158-issue-branch into 1.x

What this does

The Library hover preview renders components in an inline-block wrapper. A query container collapses to the wrapper's 120px min-width, and a component that queries an ancestor finds no container. Both show their mobile layout.

ComponentPreview.tsx now detects whether a component uses container queries:

  • an element in the wrapper has a computed containerType other than normal, or
  • an @container rule contains a selector that matches an element in the wrapper. The check uses the iframe's own CSSOM constructors.

If so, the wrapper is display: block; container-type: inline-size;, so it takes the full iframe width. Other components keep the compact preview. The check also runs after <canvas-island> hydration.

Testing

  • Hover "Grid Container" in the Library: the preview is full width.
  • Hover "Section": the preview is full width.
  • Hover "Image": the preview is compact, as before.
  • primary-panel.cy.js › "previews components on hover" passes.

AI disclosure

Claude Code (Opus 5.5) helped diagnose the problem and write the code and test. I reviewed and tested the change on a site with a theme that uses container queries.

Closes #3592158

Merge request reports