Flex field layout tweaks

[brandonkelly]

Description

Amends field widths so that:

• Four column grids are used when the container is >= 800px wide
• Two-column grids are used when the container is 400–799px wide
• In two-column grids, 25%-width fields are displayed at 50%-width; all other fields are full-width.

This sortof repurposes the width setting within field layout components. Previously the widths were always taken literally, and would be respected or not based on whether the grid had enough columns to accommodate it. So 50%-width fields were always going to be 50%-width within two/four-column grids, so their physical size could resemble a 25%-width field on smaller screens – which could be too small for the field UI.

Now, width settings determine the maximum physical size of the field, on grids that happen to have room to spare. 25% equates to >=200px; 50% equates to >= 400px; and 75% equates to >=600px. Since a two-column grid is going to have columns that are at most 399px wide, all but 25%-width fields will just end up growing to 100% width.

Related issues

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