From b659079d8bc40315897de497bcda5b41db29f47e Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:45:50 -0500
Subject: [PATCH] refactor: adjust modal styling for better visibility and
 responsiveness in onboarding component

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

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 8322f04d9..40094be3b 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -28,8 +28,8 @@
     @endif
     
     {{-- Modal Dialog --}}
-    <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;"
+    <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
+         style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); 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"
@@ -48,8 +48,7 @@
                  x-transition:leave="transition ease-in duration-150"
                  x-transition:leave-start="opacity-100"
                  x-transition:leave-end="opacity-0"
-                 class="absolute inset-0 flex flex-col"
-                 style="display: flex; flex-direction: column; height: 100%;">
+                 style="display: flex; flex-direction: column;">
                 
                 {{-- Slide Image --}}
                 @if($slide['image'])
@@ -61,7 +60,7 @@
                 @endif
                 
                 {{-- Slide Content --}}
-                <div style="padding: 1.5rem; flex: 1; overflow-y: auto;">
+                <div style="padding: 1.5rem;">
                     <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
                         {{ $slide['title'] }}
                     </h3>
@@ -71,7 +70,7 @@
                 </div>
 
                 {{-- Slide Indicators --}}
-                <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem; flex-shrink: 0;">
+                <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
                     @foreach($slides as $dotIndex => $dot)
                         <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;" 
                              :style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
@@ -79,7 +78,7 @@
                 </div>
 
                 {{-- Navigation Buttons --}}
-                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem; flex-shrink: 0;">
+                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
                     <button wire:click="previousSlide" 
                             :disabled="currentSlide === 0"
                             style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer;"