MorphOne creation fields do not organize in grid

[gtmassey]

When using the MorphOne field on a resource (in this example, it is the Primary Address), that related model's fields on creation are not showing up properly.

Here is the expected behavior, with the resource fields displaying normally, AND the MorphOne creation fields following the grid definitions for that related resource.

Here is the actual behavior. Notice the fields for the MorphOne panel are ⅓ long but they do not display in line with each other using flex-dom flex-wrap flex. Instead they stack on top of each other.

Client.php (Nova Resource) code:

    public function fields(NovaRequest $request): array
    { 
        return [
            Select::make('Status', 'status')
                ->options(ClientStatus::getOptions())
                ->default(ClientStatus::ACTIVE->value)
                ->onlyOnForms()
                ->size('w-1/3'),
            BelongsTo::make('Client Type', 'type', ClientType::class)
                ->size('w-1/3')
                ->onlyOnForms(),
            Text::make('Name')
                ->size('w-1/3')
                ->rules('required', 'max:255'),
            MorphOne::make('Primary Address', 'primaryAddress', Address::class)->required(),
            HasOne::make('Primary Caregiver', 'primaryCaregiver', Caregiver::class)->required(),
            ];
    }

Address.php (Nova Resource) code:

    public function fields(NovaRequest $request): array
    {
        return [
            Text::make('Address Line 1', 'address_line_1')
                ->size('w-1/3')
                ->required(),

            Text::make('Address Line 2', 'address_line_2')
                ->size('w-1/3')
                ->nullable(),

            Text::make('Cross Streets')
                ->size('w-1/3')
                ->nullable(),

            BelongsTo::make('City', 'city', City::class)->required()
                ->searchable()
                ->showCreateRelationButton(),

            BelongsTo::make('County', 'county', County::class)
                ->required(),
            BelongsTo::make('Zip Code', 'zipCode', ZipCode::class)
                ->required()
                ->searchable(),
            Text::make('State')
                ->required(),
        ];
    }

Using the inspector on the browser, and comparing a similar field, we can see the issue:

Expected output HTML:

<div class="bg-white dark:bg-gray-800 rounded-lg shadow divide-y divide-gray-100 dark:divide-gray-700 flex-dom flex-wrap flex">
    <div class="w-1/3" index="0">
        <!-- field 1 -->
    </div>
    <div class="w-1/3" index="1">
        <!-- field 2 -->
    </div>
    <div class="w-1/3" index="2">
        <!-- field 3 -->
    </div>
</div>

Actual HTML for MorphOne relationship creation panel:

<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="relative w-full">
        <div class="w-1/3" index="0">
            <!-- Field 1 -->
        </div>
        <div class="w-1/3" index="1">
            <!-- Field 2 -->
        </div>
        <div class="w-1/3" index="2">
            <!-- Field 3 -->
        </div>
    </div>
</div>

The actual rendered HTML includes an extra div with the classes relative w-full and does not include the necessary flex classes needed for the width calculations.

[gtmassey]

I noticed that adding flex-dom flex-wrap flex to the parent div with relative w-full classes fixes the issue, but I'm not sure how to access that in the Vue components here to create a PR.