Multi-column layouts don't wrap in small spaces

[MoritzLost]

Question

We're using multi-column layouts for the link field. For example, the link value and link text fields are placed next to each other at 2/4 width each. The problem is that those don't seem to wrap when space grows too small. It does wrap below a certain viewport width, but it doesn't wrap:

1. In a 1/4 width field.
2. In element flyouts

Those fields are both way too small to comfortably use them.

Not sure if this is an issue in Hyper or in Craft itself, I've noticed that the same applies to some built-in fields.

Container queries are a possible solution, maybe as a progressive enhancement, they have solid support by now.

Additional context

No response

[engram-design]

So we largely follow Craft's field layout functionality which allows setting fields to span 25%, 50%, 75% or 100%, and that's using flexbox I believe. There's no responsive way to handle that for field layouts, and they're done on a max viewport width.

We could override that ourselves and start adding in container queries (appreciate your work on verbb/formie#1718 which is similar to this), but I'm thinking this might be a better PR upstream to Craft itself.

I'll have an experiment.

[MoritzLost]

@engram-design Thanks!

I think the issue mostly comes from the Hyper field having its own field layout within another field, which may be set to 1/2 or 1/4 width. Craft's fields are already really narrow in element flyouts, which causes issues for a couple of fields that are more than a single text input (e.g. craftcms/cms#15419). That's the downside of media queries. Container queries could help here. But yeah, might be something to be addressed in core.

[engram-design]

For sure, all good points. I'm likely to fix this first in Hyper and then PR to Craft itself.