[1.x] Make livewire modal scrollable (#378)

* Lock inertiajs/inertia-laravel to ^0.2.4 (#371)

* Prevent body from scrolling when modal is open

* Replace flex-centering with mx-auto

* Make Modal scrollable

* inset-0, overflow-y-auto - scroll the modal
* py-6 - add bottom padding for the modal parent

* Fix for FF

Replace parent `padding-bottom` to child `margin-bottom` as described here https://stackoverflow.com/a/38177668/3071884

* Inertia: Replace flex-centering with mx-auto

* Inertia: Make Modal scrollable

* Inertia: Fix for FF

* Update InstallCommand.php

Co-authored-by: Claudio Dekker <1752195+claudiodekker@users.noreply.github.com>
Co-authored-by: Taylor Otwell <taylor@laravel.com>

resources/views/components/modal.blade.php

@@ -41,13 +41,20 @@
         nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
         prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
     }"
+    x-init="$watch('show', value => {
+        if (value) {
+            document.body.classList.add('overflow-y-hidden');
+        } else {
+            document.body.classList.remove('overflow-y-hidden');
+        }
+    })"
     x-on:close.stop="show = false"
     x-on:keydown.escape.window="show = false"
     x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
     x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     x-show="show"
     id="{{ $id }}"
-    class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:justify-center"
+    class="fixed inset-0 overflow-y-auto px-4 pt-6 z-50 sm:px-0"
     style="display: none;"
 >
     <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
@@ -59,7 +66,7 @@ class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:just
         <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
     </div>
 
-    <div x-show="show" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }}"
+    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"

stubs/inertia/resources/js/Jetstream/Modal.vue

@@ -1,7 +1,7 @@
 <template>
     <portal to="modal">
         <transition leave-active-class="duration-200">
-            <div v-show="show" class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center">
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 pt-6 sm:px-0">
                 <transition enter-active-class="ease-out duration-300"
                         enter-class="opacity-0"
                         enter-to-class="opacity-100"
@@ -19,7 +19,7 @@
                         leave-active-class="ease-in duration-200"
                         leave-class="opacity-100 translate-y-0 sm:scale-100"
                         leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                    <div v-show="show" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full" :class="maxWidthClass">
+                    <div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
                         <slot></slot>
                     </div>
                 </transition>