46 lines
1.9 KiB
PHP
46 lines
1.9 KiB
PHP
@props([
|
|
// The heading, and the sentence under it. Both optional: a modal that is one
|
|
// question does not need a subtitle, and a couple have their own header
|
|
// markup (a state badge beside the title, an icon).
|
|
'title' => null,
|
|
'subtitle' => null,
|
|
])
|
|
|
|
{{-- R24: header and footer stay put, the middle scrolls.
|
|
|
|
A modal grew with its content, so a form ran off the bottom of the window
|
|
and took its own save button with it — reachable only by scrolling the page
|
|
behind the backdrop, which on a phone means not reachable. The panel is
|
|
capped in resources/views/vendor/wire-elements-modal/modal.blade.php; this
|
|
is the other half: the part somebody has to read (what am I looking at) and
|
|
the part they have to reach (the button) are outside the scroll region.
|
|
|
|
min-h-0 on the body is the line that makes it work: a flex child refuses to
|
|
shrink below its content without it, and the overflow never engages. --}}
|
|
<div {{ $attributes->class(['flex min-h-0 flex-1 flex-col']) }}>
|
|
@if ($title !== null || isset($header))
|
|
<div class="shrink-0 border-b border-line px-6 py-4">
|
|
@isset($header)
|
|
{{ $header }}
|
|
@else
|
|
<h2 class="text-lg font-semibold text-ink">{{ $title }}</h2>
|
|
@if ($subtitle !== null)
|
|
<p class="mt-1 max-w-[60ch] text-sm text-muted">{{ $subtitle }}</p>
|
|
@endif
|
|
@endisset
|
|
</div>
|
|
@endif
|
|
|
|
{{-- The only part that scrolls. overscroll-contain so reaching the end of it
|
|
does not start scrolling the page behind the backdrop. --}}
|
|
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-5">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
@isset($footer)
|
|
<div class="shrink-0 border-t border-line bg-surface-2 px-6 py-4">
|
|
{{ $footer }}
|
|
</div>
|
|
@endisset
|
|
</div>
|