Modal issue

[joukhar]

Package

filament/filament

Package Version

^3.2

Laravel Version

^11.9

Livewire Version

^3.0

PHP Version

8.3.9

Problem description

when i want to show modal using "New post" btn this happens:

Expected behavior

modal should appear in the middle of the screen or is there any solution to show modal in body tag instead

Steps to reproduce

create livewire component : in class:

class NewPostButton extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public function newPostAction(): Action
    {
        return Action::make('newPost')
            ->label(__('New Post'))
            ->icon('heroicon-m-rocket-launch')
            ->modal()
            ->modalWidth(MaxWidth::ScreenTwoExtraLarge)
            ->size(ActionSize::Large);
    }
....

in view:

<div>
    {{ $this->newPostAction }}

    <x-filament-actions::modals />
</div>

add component to nav using renderhooks:

   FilamentView::registerRenderHook(
                    PanelsRenderHook::SIDEBAR_NAV_START,
                    fn (): string => Blade::render('@livewire(\'buttons.new-post-button\')'),
)

Reproduction repository (issue will be closed if this is not valid)

https://github.com/filamentphp/filament

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[github-actions[bot]]

Hey @joukhar! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.