[SVillette]

On create and update pages, the form card sits flush against the page header: the bottom of the "Cancel" / "Create" buttons touches the card's top border.

The form's .container-xl follows .page-header with no margin. The .card-body wrapping the form looks like it should add spacing, but it is not inside a .card, so --tblr-card-spacer-y is undefined there and its padding resolves to 0. Index pages don't have the problem because grid.html.twig wraps the grid in .page-body, whose top margin is --tblr-page-padding-y.

This PR:

• wraps the form in .page-body, like the index grid. The component attributes move to that new root element, so TalkFormComponent and other live forms keep a single root;
• gives the form error alert container mt-4 and the alert mb-0. .page-wrapper is a flex column, so margins don't collapse; without this, the alert would still touch the header and sit 40px above the form;
• compares the form validity strictly in the alert (is same as(false) rather than == false). === would need Twig 3.23, and the bundle still allows Twig 2.15.

Valid form

Before

After

Invalid form (error alert)

Before

After

---

Measured gaps:

State	Before	After
Valid form: header → card	0px	24px
Invalid form: header → alert	0px	24px
Invalid form: alert → card	16px	24px

No SCSS change, so public/app.css is not rebuilt. Functional tests select the alert by [data-test-form-error-alert], which is unchanged.

The markup changes, so an app that overrides only form_error_alert keeps an alert that touches the header and gets a 40px gap above the form, and an app that patched the gap with CSS such as .page-header + .container-xl now applies it to the alert alone.

🤖 Generated with Claude Code