From dfea88915f82248215a927683e3ae0d50111e466 Mon Sep 17 00:00:00 2001
From: Sam V <dev.svillette@proton.me>
Date: Mon, 2 Nov 2026 21:56:36 +0100
Subject: [PATCH] fix(bootstrap-admin-ui): space the create and update forms
 from the page header

The form's container followed .page-header with no margin, so the form
card touched the header's action buttons. Its .card-body wrapper has no
padding outside a .card, where --tblr-card-spacer-y is undefined.

Wrap the form in .page-body like the index grid, and give the form error
alert the same top margin so every gap is the page padding. The alert
also compares the form validity strictly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../shared/crud/common/content/form.html.twig | 26 ++++++++++---------
 .../common/content/form_error_alert.html.twig |  6 ++---
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/form.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/form.html.twig
index dacf3d35..43b2c5a9 100644
--- a/src/BootstrapAdminUi/templates/shared/crud/common/content/form.html.twig
+++ b/src/BootstrapAdminUi/templates/shared/crud/common/content/form.html.twig
@@ -9,19 +9,21 @@
 {% if form is not null %}
     {% form_theme form '@SyliusBootstrapAdminUi/shared/form_theme.html.twig' %}
 
-    <div class="container-xl" {% if attributes is defined %} {{ attributes }} {% endif %}>
-        {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'id': form.vars.id}}) }}
-        <div class="card-body">
-            {% if hookable_metadata.configuration.method is defined %}
-                <input type="hidden" name="_method" value="{{ hookable_metadata.configuration.method }}"/>
-            {% elseif form.vars.data.id|default(null) is not null %}
-                <input type="hidden" name="_method" value="PUT"/>
-            {% endif %}
-            {{ form_errors(form) }}
-            {{ form_widget(form._token) }}
+    <div class="page-body" {% if attributes is defined %} {{ attributes }} {% endif %}>
+        <div class="container-xl">
+            {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'id': form.vars.id}}) }}
+            <div class="card-body">
+                {% if hookable_metadata.configuration.method is defined %}
+                    <input type="hidden" name="_method" value="{{ hookable_metadata.configuration.method }}"/>
+                {% elseif form.vars.data.id|default(null) is not null %}
+                    <input type="hidden" name="_method" value="PUT"/>
+                {% endif %}
+                {{ form_errors(form) }}
+                {{ form_widget(form._token) }}
 
-            {% hook 'form' with { form, resource } %}
+                {% hook 'form' with { form, resource } %}
+            </div>
+            {{ form_end(form, {render_rest: hookable_metadata.configuration.render_rest|default(false)}) }}
         </div>
-        {{ form_end(form, {render_rest: hookable_metadata.configuration.render_rest|default(false)}) }}
     </div>
 {% endif %}
diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/form_error_alert.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/form_error_alert.html.twig
index 5db1f4ce..9ea60dd5 100644
--- a/src/BootstrapAdminUi/templates/shared/crud/common/content/form_error_alert.html.twig
+++ b/src/BootstrapAdminUi/templates/shared/crud/common/content/form_error_alert.html.twig
@@ -1,8 +1,8 @@
 {% set form = hookable_metadata.context.form|default(null) %}
 
-{% if form is not null and form.vars.valid == false %}
-    <div class="container-xl">
-        <div class="sylius alert alert-danger" role="alert" {{ sylius_test_html_attribute('form-error-alert') }}>
+{% if form is not null and form.vars.valid is same as(false) %}
+    <div class="container-xl mt-4">
+        <div class="sylius alert alert-danger mb-0" role="alert" {{ sylius_test_html_attribute('form-error-alert') }}>
             <div class="d-flex">
                 <div>{{ ux_icon('tabler:exclamation-circle') }}</div>
                 <div class="mx-2">