observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
128 stars 34 forks source link

Inputs.form: Insufficient vertical spacing on narrow displays #204

Closed mootari closed 2 years ago

mootari commented 2 years ago

Input labels are displayed above their input elements when the viewport width is below 30em. This arrangement relies on Observable's cell margins for vertical spacing between successive inputs.

The new form() helper simply wraps widgets in a div without adding extra styling, which causes labels to appear closer to the preceding element.

image

Suggested solution: Add a class to the default template div, and via that class apply vertical margin to the wrapped child elements.