[1.x] Make livewire modal scrollable

[andreich1980]

The problem

When using x-jet-dialog-modal on mobile and if the dialog has a lot of content you can't scroll to reach the content that doesn't fit in the screen.
Also the body of the document scrolls when modal is open.

The solution

This PR makes Modal scrollable when it is taller than the screen.

It is based on the #305 (it just disabled the body scrolling when modal is open) but also makes the modal itself scrollable.

It contains a hack for Firefox that can't work with padding bottom and overflow: auto as described on SO.

P.S. During the testing I have noticed that there's sm:items-top class that doesn't even exist. It should be sm:items-start.
Thinking about it - these classes just make the modal centered horizontally on larger screenssm:flex sm:items-start sm:justify-center.
We can achieve the same with just sm:mx-auto on the child element. And it will also help with the bottom space mentioned above. When we use flex the hack doesn't work.

How to test the PR

I tested this PR locally on Windows in fresh Chrome and Firefox.

You might want to recompile your assets to make sure that the classes I use here were not purged.
And you might want to hard refresh browser page Ctrl+F5 to prevent it using cached version of the app.css.

To test this PR I created a fresh Laravel project with Livewire stack.

laravel new jetstream-test --jet --stack=livewire

Set up your local database

DB_CONNECTION=sqlite

touch database/database.sqlite
php artisan migrate

Create a Livewire component

php artisan livewire:make TestModal

Edit the component and the view

class TestModal extends Component
{
    public $isOpen = false; // Add this public property

    public function render()
    {
        return view('livewire.test-modal');
    }
}

<div class="p-6">
    <x-jet-button wire:click="$set('isOpen', true)">Open Modal</x-jet-button>

    <x-jet-dialog-modal wire:model="isOpen">
        <x-slot name="title">Title</x-slot>

        <x-slot name="content">
            <div class="space-y-32">
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$toggle('isOpen')" wire:loading.attr="disabled">Close</x-jet-secondary-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>

Prepare the welcome page to use the modal

{{-- resources\views\welcome.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-6 pb-64">
        @livewire('test-modal')
    </div>
</x-app-layout>

Don't forget to add a repository to the composer.json as described here

Run the website php artisan server and open http://127.0.0.1:8000/ in your browser.

Make the browser window smaller and this is what you should see

Click the button and try to scroll the modal.

Notice that the body of the document doesn't scroll when modal is open.

Hope you'll like it.

[taylorotwell]

Nothing needs to be changed on the Inertia version?

[andreich1980]

@taylorotwell I have commited the same changes for Inertia.

I tested it locally copying Modal.vue that I have commited
to the resources/js/Jetstream folder.

UPD. Inertia already had overflow-hidden on body when modal is open.

[kreierson]

The following commit eb0ff84 has a little annoyance. When the modal shows, the scrollbar disappears in the browser causing a slight shift. Might be distracting to some.