Can I use TileLayout for this usecase?

[mathias]

Use case:
I would like 2 component left and right. In my current setup, they are in a HLayout with width 50-50. I want them to take up available space in the parent container equally, but if the components are resized to a certain minimum width, (for example when the user makes the Browser smaller) want the right one to instead go under the left one.

I played around with TileLayout and that does indeed rearrange the tiles, but it only has a way to hardcode the size of all the tiles?

I haven't found any other way to accomplish this. I looked in the usecase, but all examples i could find was about changing the size of the components proportially in a hlayout/vlayout, not rearranging them.

Pointers much appreciated!

[Isomorphic]

We don't have any layout components that will overlap the elements being managed, partly because that would technically be considered an accessibility violation. But if you wanted a behavior like you describe, you could place the components into a Canvas and write logic to size them whenever the parent is sized.

[mathias]

An example would be a list to the left, and an editor to the right. If the browser is made too narrow, the editor is moved below the list grid. This is something that happens in lots of places online, don't you agree? I think it would be really useful functionality.

[Isomorphic]

Just to note, the reason we mentioned an accessibility violation above was because we though that by "go under", you meant stacking as in zIndex.

The simplest was to achieve this is probably just to use a Layout and flip the layout.vertical property at a certain threshold size. But with two components it would be almost equally easy to just do the sizing yourself.

[mathias]

Oh maaan it would be great with a layout that handled this.... :)