From f51a528995395dcd29168618a5fa38962dc59411 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:44:22 -0500
Subject: [PATCH] refactor: update modal styling and layout for improved
 responsiveness and user interaction in onboarding component

---
 .../Others/Onboarding/resources/views/modal.blade.php | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 105530835..8322f04d9 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -11,13 +11,12 @@
              document.documentElement.style.overflow = ''; 
          } 
      })"
-     class="fixed inset-0 z-50 overflow-hidden"
-     style="display: flex; align-items: center; justify-content: center; pointer-events: none;">
+     style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
     
     {{-- Backdrop --}}
     @if($this->showBackdrop)
-    <div class="absolute inset-0 bg-black/50 transition-opacity duration-300"
-         style="pointer-events: auto;"
+    <div class="bg-black/50 transition-opacity duration-300"
+         style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
          x-show="open"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0"
@@ -29,8 +28,8 @@
     @endif
     
     {{-- Modal Dialog --}}
-    <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden relative"
-         style="width: 100%; max-width: 32rem; height: 500px; margin: 1rem; pointer-events: auto;"
+    <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
+         style="position: relative; width: calc(100% - 2rem); max-width: 32rem; height: 500px; pointer-events: auto; z-index: 10;"
          x-show="open"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 scale-90"