Bug Fix : FormPanel with AssociationField render as embedded form issue

[daday-andry]

This is a bug fix of issue #5596

Bug Description

An error occured in the template when trying to render as ambedded form an AssociationField under EaFormPanelType.

To reproduce

public function configureFields(string $pageName): iterable {
    return  [
        FormField::addPanel('My Panel title'),
        AssociationField::new('propertyName')->renderAsEmbeddedForm(EmbedeedCrunController::class),
    ]
}

[featuriz]

6c27330
This fix works for me.

[daday-andry]

Hi, @javiereguiluz ,
according the file changes , what is the reason of PHP-CS-Fixer test failure ?
Thank's

[fonpacific]

6c27330 This fix works for me.

This 'kinda' works for me too. Only issue I have is that it screws up the columns set with ->setColumns() in embedded form.
This is the relevant part in my "main" CRUD ClientCrudController:

public function configureFields(string $pageName): iterable
{
    ...
    yield FormField::addPanel('panel 1');
    yield AssociationField::new('owner', false)
        ->renderAsEmbeddedForm(OwnerDataCrudController::class, 'newOwnerPage', 'editOwnerPage')
        ->onlyOnForms();
    ...
}

And this is a portion of OwnerDataCrudController:

public function configureFields(string $pageName): iterable
{
    ...
    yield TextField::new('firstName', 'Nome')
        ->setRequired($pageName === 'newOwnerPage')
        ->setColumns('col-12 col-lg-4');

    yield TextField::new('lastName', 'Cognome')
        ->setRequired($pageName === 'newOwnerPage')
        ->setColumns('col-12 col-lg-4');

    yield TextField::new('fiscalCode', 'Codice fiscale')
        ->setRequired($pageName === 'newOwnerPage')
        ->setColumns('col-12 col-lg-4');
    ...

After the aforementioned fix, the fileds are displayed in a single column.
A fix could be to add css class "row" in the <div class="form-widget"> inside <div class="form-panel">

[fonpacific]

Another way to deal with the 'one column' issue is via SCSS:

.form-panel-header + .form-panel-body .field-association > .form-widget {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x)*-.5);
    margin-right: calc(var(--bs-gutter-x)*-.5);
    margin-top: calc(var(--bs-gutter-y)*-1);

    > * {
        flex-shrink: 0;
        margin-top: var(--bs-gutter-y);
        max-width: 100%;
        padding-left: calc(var(--bs-gutter-x)*.5);
        padding-right: calc(var(--bs-gutter-x)*.5);
    }
}

This code restores the correct column disposition (is the css bootstrap uses for .row class.