Modal styles are not applied correctly

Hi,

I've tried to use the modal component, but I keep getting stuck on a view that does not look correctly. If you look at the screenshot you can see that the modal is visible on the bottom of the page, instead what I suspect centered on the screen.

Can anyone tell me what I am doing wrong?

Stack:

PHP 8.3.7
Laravel 11.x
Livewire 3.5.4
Tailwind 3.4.4

My layout file contains:

<body>
    <!-- Content -->

    @livewire('wire-elements-modal)
</body>

My card component:

<button onclick="Livewire.dispatch('openModal', { component: 'modals.create-project' })" class="btn-primary">
        Create Project
</button>

My child modal component class

<?php

namespace App\Livewire\Modals;

use App\Livewire\Forms\Project\Create as ProjectCreateForm;
use App\Models\Project;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Str;
use LivewireUI\Modal\ModalComponent;

class CreateProject extends ModalComponent
{
    public ProjectCreateForm $form;

    public function submit()
    {
        $this->form->validate();

        Project::create([
            'name' => Str::slug($this->form->name),
            'display_name' => $this->form->name,
            'description' => $this->form->description,
            'team_id' => auth()->user()->team->id,
            'status' => $this->form->status,
        ]);

        $this->redirect('#')->with('success', 'Project created successfully.');
    }

    public function render(): View
    {
        return view('livewire.modals.create-project');
    }
}

wire-elements / modal

Modal styles are not applied correctly #455