bug #6003 Fix the alignment of form fields in some cases (javiereguiluz)

This PR was merged into the 4.x branch.

Discussion
----------

Fix the alignment of form fields in some cases

When using Bootstrap, you must be careful when nesting `<div class="row">`. We didn't do this correctly in all cases, so the column/fieldsets sometimes didn't span the entire available width.

| Before this PR | After this PR
| -------------- | -------------
| <img width="245" alt="Captura de pantalla 2023-11-04 a las 12 29 09" src="https://github.com/EasyCorp/EasyAdminBundle/assets/73419/e86b90a6-6c28-43dd-9666-e1bfa57491a4"> | <img width="216" alt="Captura de pantalla 2023-11-04 a las 12 28 45" src="https://github.com/EasyCorp/EasyAdminBundle/assets/73419/a7b99fc9-3664-4c97-8b00-099d1a21c610">

The trick is to remove the first `<div class="row">` that wraps everything. Whenever we need to wrap fields in rows (inside tabs, columns or fieldsets) we already add a row, so we don't need that extra one.

Commits
-------

9d27eb5 Fix the alignment of form fields in some cases

src/Factory/FormLayoutFactory.php

@@ -154,15 +154,14 @@ private function linearizeLayoutConfiguration(FieldCollection $fields): void
     {
         $formUsesColumns = false;
         $formUsesTabs = false;
+        $formUsesFieldsets = false;
         foreach ($fields as $fieldDto) {
-            if ($fieldDto->isFormColumn()) {
-                $formUsesColumns = true;
-                continue;
-            }
-
-            if ($fieldDto->isFormTab()) {
-                $formUsesTabs = true;
-            }
+            match (true) {
+                $fieldDto->isFormColumn() => $formUsesColumns = true,
+                $fieldDto->isFormTab() => $formUsesTabs = true,
+                $fieldDto->isFormFieldset() => $formUsesFieldsets = true,
+                default => null,
+            };
         }
 
         $aFormColumnIsOpen = false;
@@ -269,6 +268,14 @@ private function linearizeLayoutConfiguration(FieldCollection $fields): void
             $fields->prepend($this->createTabPaneGroupOpenField());
             $fields->prepend($this->createTabListField($tabs));
         }
+
+        // if the form doesn't use any layout fields (tabs, columns, fieldsets, etc.),
+        // wrap all fields inside a fieldset to simplify the rendering of the form later
+        // (by default, this fieldset is invisible and doesn't change the form layout, so it's fine)
+        if (!$formUsesTabs && !$formUsesColumns && !$formUsesFieldsets) {
+            $fields->prepend($this->createFieldsetOpenField());
+            $fields->add($this->createFieldsetCloseField());
+        }
     }
 
     private function createColumnGroupOpenField(bool $formUsesTabs): FieldDto

src/Resources/views/crud/detail.html.twig

@@ -50,15 +50,13 @@
 
 {% block main %}
     {% block detail_fields %}
-    <div class="row">
         {% for field in entity.fields %}
             {% if field.isFormLayoutField %}
                 {{ _self.render_layout_field(field) }}
             {% else %}
                 {{ _self.render_field_contents(entity, field) }}
             {% endif %}
         {% endfor %}
-    </div>
     {% endblock detail_fields %}
 
     {% block delete_form %}

src/Resources/views/crud/form_theme.html.twig

@@ -8,15 +8,13 @@
 
     {{ parent() }}
 
-    <div class="row"> {# this is closed in form_end #}
-        <input type="hidden" name="referrer" value="{{ ea.request.query.get('referrer') }}">
+    <input type="hidden" name="referrer" value="{{ ea.request.query.get('referrer') }}">
 {% endblock form_start %}
 
 {% block form_end %}
-            {% if not render_rest is defined or render_rest %}
-                {{ form_rest(form) }}
-            {% endif %}
-        </div> {# this closes the '<div class="row">' of form_start #}
+        {% if not render_rest is defined or render_rest %}
+            {{ form_rest(form) }}
+        {% endif %}
     </form>
 {% endblock %}
 

tests/Factory/FormLayoutFactoryTest.php

@@ -51,12 +51,14 @@ public function testFixFormColumnsErrors(array $originalFields, string $expected
 
     public function provideFormLayouts()
     {
-        yield 'Only fields' => [
+        yield 'Only fields (a fieldset is added automatically to wrap all fields)' => [
             ['field', 'field', 'field'],
             <<<LAYOUT
-                field
-                field
-                field
+                fieldset_open
+                    field
+                    field
+                    field
+                fieldset_close
             LAYOUT,
         ];