fix: make modals scrollable on small screens

Fixes #6974

- Add max-height constraints to prevent modals from exceeding viewport
- Enable vertical scrolling with overflow-y-auto on content areas
- Improve mobile responsiveness with consistent padding
- Separate fixed header from scrollable content using flexbox
- Add touch scrolling support for iOS devices

This ensures buttons like "Back" and "Continue" remain accessible
on small devices by allowing users to scroll the modal content.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

resources/views/components/modal.blade.php

@@ -1,7 +1,7 @@
 <dialog id="{{ $modalId }}" class="modal">
     @if ($yesOrNo)
-        <form method="dialog" class="rounded-sm modal-box" @if (!$noSubmit) wire:submit='submit' @endif>
-            <div class="flex items-start">
+        <form method="dialog" class="rounded-sm modal-box max-h-[calc(100vh-5rem)] flex flex-col" @if (!$noSubmit) wire:submit='submit' @endif>
+            <div class="flex items-start overflow-y-auto" style="-webkit-overflow-scrolling: touch;">
                 <div class="flex items-center justify-center shrink-0 w-10 h-10 mr-4 rounded-full">
                     <svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" aria-hidden="true">
@@ -33,7 +33,8 @@
             </div>
         </form>
     @else
-        <form method="dialog" class="flex flex-col w-11/12 max-w-5xl gap-2 rounded-sm modal-box"
+        <form method="dialog" class="flex flex-col w-11/12 max-w-5xl max-h-[calc(100vh-5rem)] gap-2 rounded-sm modal-box overflow-y-auto"
+            style="-webkit-overflow-scrolling: touch;"
             @if ($submitWireAction) wire:submit={{ $submitWireAction }} @endif
             @if (!$noSubmit && !$submitWireAction) wire:submit='submit' @endif>
             @isset($modalTitle)