fix:improve modal performance and useability

resources/views/components/ib-alpine-modal.blade.php

@@ -7,14 +7,16 @@
     'persistent' => false
 ])
 
-<dialog 
+<div>
+    @teleport('body')
+    <dialog 
         x-data="{ open: false }"
         x-on:toggle-{{ $key }}.window="open = !open"
         class="relative z-50 w-auto h-auto"
         @if($closeOnEscape)
             @keydown.window.escape="open = false"
         @endif
->
+    >
         <template x-teleport="body">
             <div x-transition.opacity x-show="open" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-full h-full">
                 <div 
@@ -47,4 +49,6 @@
                 </x-card>
             </div>
         </template>
-</dialog>
+    </dialog>
+    @endteleport
+</div>

resources/views/components/ib-form.blade.php

@@ -14,7 +14,7 @@
             <x-section-border class="my-3" />
         @endif
 
-        <div class="flex justify-between gap-3">
+        <div class="flex justify-end gap-3">
             {{ $actions}}
         </div>
     @endif

resources/views/components/ib-livewire-modal.blade.php

@@ -6,7 +6,9 @@
     'persistent' => false
 ])
 
-<dialog
+<div>
+    @teleport('body')
+    <dialog
         {{ $attributes->except('wire:model')->class(["modal"]) }}
         x-data="{open: @entangle($attributes->wire('model')).live }"
         :class="{'modal-open !animate-none': open}"
@@ -14,7 +16,7 @@
         @if($closeOnEscape)
             @keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false"
         @endif
->
+    >
         <x-card     
             :title="$title"
             :subtitle="$subtitle"
@@ -43,4 +45,6 @@
                 {{ __('Close') }}
             </a>
         </div>
-</dialog>
+    </dialog>
+    @endteleport
+</div>

resources/views/livewire/manage-portfolio-form.blade.php

@@ -86,9 +86,9 @@ new class extends Component {
                 <x-button 
                     wire:click="$toggle('confirmingPortfolioDeletion')" 
                     wire:loading.attr="disabled"
-                    icon="o-trash"
+                    class="btn  text-error" 
-                    class="btn btn-ghost btn-circle text-error" 
                     title="{{ __('Delete Portfolio') }}"
+                    label="{{ __('Delete Portfolio') }}"
                 />
             @endif
 

resources/views/livewire/manage-transaction-form.blade.php

@@ -160,9 +160,9 @@ new class extends Component {
                 <x-button 
                     wire:click="$toggle('confirmingTransactionDeletion')" 
                     wire:loading.attr="disabled"
-                    icon="o-trash"
+                    class="btn text-error" 
-                    class="btn btn-ghost btn-circle text-error" 
                     title="{{ __('Delete Transaction') }}"
+                    label="{{ __('Delete Transaction') }}"
                 />
             @endif