Responsive grid with form elements

[r100-stack]

@FlyersPh9, @Ben-Pusey-Bentley, and I noticed that creating a responsive grid of form elements was a common UI pattern. So, we created a small sample of one of the ways to implement this:

Sample sandbox

Responsive design: Uses arbitrary breakpoints of 600px and 400px:

width > 600px	600px > width > 400px	400px > width

Screen recording

Enregistrement.de.l.ecran.2024-06-04.a.08.54.02.mov

[mayank99]

This should probably use container queries instead of media queries. The screen-size is irrelevant for forms that may be nested deep inside a small dialog or widget or something.