Fix: re-organized dialog and notification z-indices

- Notifications and toasts now appear higher than dialogs when appearing together
- Standardized dialog z-index
- Added documentation for z-index guide

src/App.vue

@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[120] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"

src/assets/styles/tailwind.css

@@ -16,7 +16,7 @@
 	}
 
 	.dialog-overlay {
-		@apply z-50 fixed inset-0 bg-black/50 flex justify-center items-center p-6;
+		@apply z-[100] fixed inset-0 bg-black/50 flex justify-center items-center p-6;
 	}
 
 	.dialog {

src/components/FeedFilters.vue

@@ -213,7 +213,6 @@ export default class FeedFilters extends Vue {
 
 <style>
 #dialogFeedFilters.dialog-overlay {
-  z-index: 100;
   overflow: scroll;
 }
 </style>

src/components/HiddenDidDialog.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  >
-    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+  <div v-if="isOpen" class="dialog-overlay">
+    <div class="dialog">
       <!-- Header -->
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>

src/components/ImageMethodDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay">
     <div class="dialog relative">
       <div class="text-lg text-center font-bold relative">
         <h1 id="ViewHeading" class="text-center font-bold">

src/components/PhotoDialog.vue

@@ -10,7 +10,7 @@ Comprehensive error handling * * @author Matthew Raymer * @version 1.0.0 * @file
 PhotoDialog.vue */
 
 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay>
     <div class="dialog relative">
       <div class="text-lg text-center font-light relative z-50">
         <div id="ViewHeading" :class="headingClasses">