From 0a5c35c5800803cfb02d36270ca8820b4327ef2c Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Fri, 17 Jan 2025 04:42:30 -0500
Subject: [PATCH] Make dialog close button usable even when loading (#1388)

The overlay is at z-index 30, so we need a higher z-index for the close
button; I've arbitrarily chosen 40.
---
 frontend/viewer/src/lib/activity/ActivityView.svelte | 6 ++----
 frontend/viewer/src/lib/history/HistoryView.svelte   | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
index 2797524ce..426dbbaff 100644
--- a/frontend/viewer/src/lib/activity/ActivityView.svelte
+++ b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -51,10 +51,8 @@
     </div>
   </Button>
   <Dialog {open} on:close={toggleOff} {loading} persistent={loading} class="w-[700px]">
-    <div slot="title">
-      Activity
-      <Button on:click={toggleOff} icon={mdiCloseCircle} class="float-end" rounded="full"></Button>
-    </div>
+    <Button on:click={toggleOff} icon={mdiCloseCircle} class="absolute right-2 top-2 z-40" rounded="full"></Button>
+    <div slot="title">Activity</div>
     <div class="m-6 grid gap-x-6 h-[50vh]" style="grid-template-columns: auto 4fr">
       <div class="flex flex-col gap-4 overflow-y-auto">
         <div class="border rounded-md">
diff --git a/frontend/viewer/src/lib/history/HistoryView.svelte b/frontend/viewer/src/lib/history/HistoryView.svelte
index 36f8737e3..57d280f55 100644
--- a/frontend/viewer/src/lib/history/HistoryView.svelte
+++ b/frontend/viewer/src/lib/history/HistoryView.svelte
@@ -35,10 +35,8 @@
     </div>
   </Button>
   <Dialog {open} on:close={toggleOff} {loading} persistent={loading} class="w-[700px]">
-    <div slot="title">
-      History
-      <Button on:click={toggleOff} icon={mdiCloseCircle} class="float-end" rounded="full"></Button>
-    </div>
+    <Button on:click={toggleOff} icon={mdiCloseCircle} class="absolute right-2 top-2 z-40" rounded="full"></Button>
+    <div slot="title">History</div>
     <div class="m-6 grid gap-x-6 h-[50vh]" style="grid-template-columns: auto 4fr;">
 
       <div class="flex flex-col gap-4 overflow-y-auto">