Found by headless e2e smoke pass. When author CSS applies display: block to a form control (e.g. via form > * { display: block; margin: 8px 0; }), the control's box appears to collapse or render incorrectly:
- inputs / select / textarea / button are not visible in the screenshot;
- adjacent labels collide at the top-left of the form (overlapping text) instead of stacking with the requested 8px vertical margin.
Repro (broken)#
cargo run -p we-e2e -- --url crates/e2e/pages/04_forms.html --out /tmp/04.png
See crates/e2e/artifacts/04_forms.png.
Control case (works)#
cargo run -p we-e2e -- --url crates/e2e/pages/04b_forms_minimal.html --out /tmp/04b.png
See crates/e2e/artifacts/04b_forms_minimal.png — the same controls without author CSS render fine (inline, on one row).
Likely cause#
Form-control layout in we_layout probably assumes display: inline-block. When author CSS forces display: block, the layout path either zero-sizes the box or fails to honour margin: 8px 0. Labels then flow into the gap with no spacing.
Acceptance#
Form controls respect author-supplied display: block and margin: 8px 0 — the form in page 04 lays out as one control per line with visible spacing. Each control retains its intrinsic painting (text-input border, button chrome, checkbox glyph, etc.).