Add configurable columns to directory view

svelte/src/layout/Dialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-let { children }: {
+let { children, onclose }: {
 	children?: import('svelte').Snippet;
+	onclose?: () => void
 } = $props();
 let dialog: HTMLDialogElement = $state()
 
@@ -8,12 +9,12 @@ export const open = (origin: DOMRect|MouseEvent) => {
 	// Show the window so we can get the location
 	dialog.showModal()
 
-	const edge_offset = 2
+	const edge_offset = 10
 
 	// Get the egdes of the screen, so the window does not spawn off-screen
 	const dialog_rect = dialog.getBoundingClientRect()
-	const max_left = window.innerWidth - dialog_rect.width - edge_offset
-	const max_top = window.innerHeight - dialog_rect.height - edge_offset
+	const max_left = document.documentElement.clientWidth - dialog_rect.width - edge_offset
+	const max_top = document.documentElement.clientHeight - dialog_rect.height - edge_offset
 
 	let min_left: number, min_top: number
 	if (origin instanceof DOMRect) {
@@ -35,6 +36,9 @@ export const open = (origin: DOMRect|MouseEvent) => {
 
 export const close = () => {
 	dialog.close()
+	if (onclose !== undefined) {
+		onclose()
+	}
 }
 
 // Attach a click handler so that the dialog is closed when the user clicks
@@ -44,7 +48,7 @@ export const close = () => {
 const click = (e: MouseEvent) => {
 	if (e.target === dialog) {
 		e.preventDefault()
-		dialog.close()
+		close()
 	}
 }
 </script>