fix modal

resources/css/app.css

@@ -18,7 +18,7 @@ button[isError] {
     @apply pt-4 pl-24 pr-10 mx-auto;
 }
 .custom-modal {
-    @apply px-8 py-4 border bg-base-100 border-coolgray-200;
+    @apply flex flex-col gap-2 px-8 py-4 border bg-base-100 border-coolgray-200;
 }
 .label-text,
 label {

resources/views/layouts/app.blade.php

@@ -2,7 +2,7 @@
 @section('body')
     @parent
     <x-navbar />
-    <div class="fixed z-50 top-[4.5rem] left-4" id="vue">
+    <div class="fixed z-30 top-[4.5rem] left-4" id="vue">
         <magic-bar></magic-bar>
     </div>
     <livewire:sponsorship />

resources/views/livewire/project/service/compose-modal.blade.php

@@ -1,4 +1,4 @@
-<form x-data="{ raw: true }" class="flex flex-col gap-2 custom-modal" wire:submit.prevent='submit'>
+<form x-data="{ raw: true }" class=" custom-modal" wire:submit.prevent='submit'>
     <div class="flex items-end gap-2">
         <h1>Docker Compose</h1>
         <div x-cloak x-show="raw">
@@ -21,7 +21,12 @@
         <x-forms.textarea rows="20" readonly id="service.docker_compose">
         </x-forms.textarea>
     </div>
-    <x-forms.button type="submit">
+    <div class="flex justify-end w-full gap-2">
+        <x-forms.button class="w-64" type="submit">
             Save
         </x-forms.button>
+        <x-forms.button wire:click='closeModal'>
+            Close
+        </x-forms.button>
+    </div>
 </form>

resources/views/vendor/livewire-ui-modal/modal.blade.php

@@ -12,10 +12,10 @@
             x-on:close.stop="setShowPropertyTo(false)"
             x-on:keydown.escape.window="closeModalOnEscape()"
             x-show="show"
-            class="fixed inset-0 z-10 overflow-y-auto"
+            class="fixed inset-0 z-40 overflow-y-auto"
             style="display: none;"
     >
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
+        <div class="flex items-end justify-center px-4 pt-4 pb-10 text-center sm:block sm:p-0">
             <div
                     x-show="show"
                     x-on:click="closeModalOnClickAway()"
@@ -30,23 +30,23 @@
                 <div class="absolute inset-0 bg-black opacity-70"></div>
             </div>
 
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            {{-- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> --}}
 
             <div
                     x-show="show && showActiveComponent"
-                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter="ease-out duration-200"
                     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"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
+                    class="w-full overflow-hidden text-left align-bottom transition-all transform sm:my-8 sm:align-middle sm:w-full"
                     id="modal-container"
                     x-trap.noscroll.inert="show && showActiveComponent"
                     aria-modal="true"
             >
                 @forelse($components as $id => $component)
-                    <div class="flex items-center justify-center" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                    <div class="sm:mx-20" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                         @livewire($component['name'], $component['attributes'], key($id))
                     </div>
                 @empty