feat(gallery): image detail view

web/components/modal.templ

@@ -1,7 +1,27 @@
 package components
 
+// Modal renders a modal dialog.
+//
+// The <dialog> itself must never be an htmx swap target: swapping its
+// innerHTML would replace the wrapper below (centering + close button) and
+// break the layout. Content is swapped into the inner element with id
+// "<id>-content" instead.
 templ Modal(id string) {
-	<dialog id={ id } popover class="m-auto">
-		{ children... }
+	<dialog
+		id={ id }
+		class="m-auto backdrop:bg-black/90 bg-transparent p-0 w-full h-full max-w-none max-h-none"
+		hx-on::after-swap="if (!this.open) this.showModal()"
+	>
+		<div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+			<button
+				class="absolute right-5 top-5 z-10 p-2 text-white"
+				hx-on:click="this.closest('dialog').close()"
+			>
+				X
+			</button>
+			<div id={ id + "-content" } class="w-full h-full flex items-center justify-center overflow-hidden">
+				{ children... }
+			</div>
+		</div>
 	</dialog>
 }