It is nearly impossible to create field layouts that work in entry forms, live preview and element flyouts

[MoritzLost]

Now that entry types can be reused, it's very common to have entry types that will be edited in multiple contexts:

• As a regular entry form
• As an element fly-out
• As a matrix block in live preview (either in inline or cards view)

What I found is that it's nearly impossible to optimize field layouts that work well in all of those contexts. A lot of that is due to how field layouts are made responsive. In small containers (element flyouts and live preview), field layouts are forced into two columns instead of four, and field widths are adjusted:

• 1/4 width increases to 2/4
• 2/4 width stays at 2/4
• 3/4 width increases to 4/4

This is already a problem, as using a 3/4 + 1/4 row will cause the entire field layout to shift in those contexts. However, the bigger issue is that the default live preview and element fly-out containers are just too small for a two-column layout. For those fields to be usable in live preview, you need to set most fields to full width:

But that's a terrible waste of space in a regular entry form:

In this context, using smaller fields is much more efficient:

But is barely usable in live preview / element flyouts:

---

I'm not sure I have a good solution, but some ideas:

• Container queries would be a huge improvement to the responsive behaviour. Right now, the two-column layout will stay the same even if you make the live preview window much smaller, to the point where each field only has a couple of pixels. Defining a reasonable minimum width for all fields and switching to a single column layout below that would improve the situation considerably. This can only be done with container queries, as the field layouts are constrained by flyout / live preview containers, not the viewport.
• As a stop-gap solution, live preview could always use a single-column layout instead of a two-column layout. The default width of the live preview sidebar on a full HD monitor is too small for two columns.
• Maybe give developers more control over the responsive behaviour of the field layouts? I don't really like that solution, because it really overcomplicates things, but maybe it's necessary if any possible default behaviour will not work for everyone.

[brandonkelly]

Thanks for the feedback! I’ve resolved this for Craft 5.6 via #16303.

[MoritzLost]

@brandonkelly That's huge, thanks, Brandon!

Just tested this on the 5.6 branch, it works great. Yesterday, I optimized my content builder entry for live preview at the expense of full entry forms, now I can roll back most of that since the previous settings look much better in live preview now!

I only had two small problems:

• The actual input size for 25% fields can shrink down to ~170px (excluding the inline padding) when the container is at 400px and 800px, which still feels slightly too narrow for some fields. Especially fields like link that have their own padding and grid. A link field at that width looks like this – admittedly, probably just not a good idea to put a link field at 25%:

• If you have one row with two fields at 75% and 25%, followed by one row with four fields at 25%, all the fields will wrap in an unexpected ways, so fields that have nothing to do with each other end up next to each other. But that can be solved using a line break UI element.

Overall, a really great improvement!

[brandonkelly]

The actual input size for 25% fields can shrink down to ~170px (excluding the inline padding) when the container is at 400px and 800px, which still feels slightly too narrow for some fields.

If I make the minimum width much larger, even a 16" MacBook Pro wouldn’t be wide enough to display four columns. So this just comes down to being smart about which fields should be shown at 25% width. (And in this case, Link should also be doing a better job of being responsive – that’s now fixed for the next 5.5.x release via 8c5cb97.)

If you have one row with two fields at 75% and 25%, followed by one row with four fields at 25%, all the fields will wrap in an unexpected ways, so fields that have nothing to do with each other end up next to each other. But that can be solved using a line break UI element.

Yeah that situation is what Line Break is for.

[MoritzLost]

@brandonkelly Good point, the adjustment for Link fields looks good as well 👍

[roberttolton]

Sorry to comment on a closed issue, but the container-type: inline-size; fix is causing issues in other places:

Commerce:

General: