1183 component height

[pngwn]

This was more involved that I thought it would be. Closes #1183. Closes #1184.

Notes for #1183

In #1165 we changed some flex behaviour but this didn't work in all contexts, most notably it forced everything to grow regardless of its parent. This worked well for one case but broke some others (including the default interface layout).

Most components are now aware of their parent and selectively apply flex-1.

I've also made some other tweaks as I found a few additional bugs when fixing this, all relating to layout.

Interface

before

after

Custom Layout

before

after

Notes for #1184

We had some custom logic to detect when form components were adjacent to one another, removing spacing and top + bottom border radiuses where necessary. However, this logic assumed that form elements always appeared in a column (one on top of the other). Side-by-side form elements also applied the exact same logic leading to very broken layouts. With the above change making components aware of their parent, we can easily change the layout behaviour depending on whether the parent is a column or a row.

• If adjacent forms are in a column, they will be grouped 'stacked' (one on top of the other with top and bottom border radiuses modified).
• • if adjacent forms are in a row, they will grouped alongside one another with left + right border radiuses modified.

We might need to modify this if we change how layouts work.

before

after

[pngwn]

Oh, @gary149, yet another use case for container queries. This was actually very annoying to implement.