[jherforth]

In the Home Assistant panel builder, choosing a Medium or Large preview made the tile editors too narrow to use.

Cause. The builder decided whether to put the preview beside the tile editors from the screen's width (MUI lg). Inside the Admin Panel, though, the builder itself is only about 745px wide. A Large preview (720px) placed beside the editors left them a sliver, too narrow to type in. Medium squeezed them as well.

Fix. The builder now lays out by its own width, measured with a ResizeObserver:

• Placement. A new pure helper, previewLayout in haPanelBuilder.js, puts the preview beside the editors only when they still get at least 420px. Otherwise the preview goes above them. In the panel, Small sits beside the editors and Medium and Large sit above.
• Scaling. The preview is drawn at the widget size it stands for. It is scaled down as a whole only when the builder is narrower than that, as on a phone. Tiles therefore wrap the way they will on the dashboard.
• Tile editor fields. Label, Icon and Size, and the "Show only when" row, now wrap by the editor column's width through a container query, instead of by the screen's breakpoints.

Testing.

• Unit tests cover previewLayout. The client suite passes (819/819) and the build is clean.
• Edge, with Home Assistant mocked: 10/10 checks passed.
  • At each size, the preview is drawn at 300, 460 and 720px.
  • Small sits beside the editors; Medium and Large sit above them.
  • A tile label can be typed at every size.
  • On a 390px phone, Large scales to fit with no sideways scroll.
• Server tests weren't run, since this change is client-only.

🤖 Generated with Claude Code