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.
sillsdev · Jan 17, 2025 · 0a5c35c · 0a5c35c
1 parent 29cd3c8
commit 0a5c35c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git 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
@@ -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">