viljarb/LazyPM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make sure modal handles overflow

Browse Source
This commit is contained in:
Robin Olsen
2026-03-19 09:37:54 +01:00
parent 925cf089be
commit 04061792e8
3 changed files with 79 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pkg/web/components/modal.templ
View File

@@ -18,7 +18,7 @@ templ Modal(props ModalProps) {
}
}}
<div
class={ "fixed inset-0 z-50 items-center justify-center mx-auto", maxWidth }
class="fixed inset-0 z-50 overflow-y-auto"
id={ props.ID }
x-data={ `{ open: ` + fmt.Sprintf("%t", props.Open) + ` }` }
x-show="open"
@@ -27,13 +27,15 @@ templ Modal(props ModalProps) {
aria-labelledby="modal-title"
>
<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
<div class="flex min-h-full items-center justify-center p-4 pointer-events-none">
<div class={ "relative bg-base-100 rounded-lg w-full pointer-events-auto" }>
<div class="flex justify-between items-center p-4 border-b">
<div class="flex min-h-full items-center justify-center p-4">
<div
class={ "relative w-full rounded-lg bg-base-100 pointer-events-auto flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden", maxWidth }
>
<div class="flex items-center justify-between p-4 border-b shrink-0">
<h2 class="font-bold text-lg" id="modal-title">{ props.Title }</h2>
<button type="button" class="btn btn-ghost" @click="open = false">✕</button>
</div>
<div class="p-4">
<div class="p-4 overflow-y-auto">
if props.Content != nil {
@props.Content
}