Ensure notifications appear above modals

css/style.css

@@ -819,6 +819,27 @@ button:not(.icon-button):focus {
 }
 
 /* Notifications */
+#notificationPortal {
+  position: fixed;
+  top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  width: min(90vw, 32rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+#notificationPortal > * {
+  width: 100%;
+  margin-bottom: 0;
+  pointer-events: auto;
+  border-radius: 0.75rem;
+  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.3);
+}
+
 /* Base styling without a forced display */
 #errorContainer,
 #successContainer {

index.html

@@ -149,28 +149,36 @@
         </div>
       </header>
 
-      <!-- Error Container -->
+      <!-- Notification Portal -->
       <div
-        id="errorContainer"
-        class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
-      ></div>
-
-      <!-- Status Container -->
-      <div
-        id="statusContainer"
-        class="hidden status-banner"
-        role="status"
+        id="notificationPortal"
+        role="region"
         aria-live="polite"
+        aria-label="System notifications"
       >
-        <span class="status-spinner" aria-hidden="true"></span>
-        <span class="status-message" data-status-message></span>
-      </div>
+        <!-- Error Container -->
+        <div
+          id="errorContainer"
+          class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
+        ></div>
 
-      <!-- Success Container -->
-      <div
-        id="successContainer"
-        class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
-      ></div>
+        <!-- Status Container -->
+        <div
+          id="statusContainer"
+          class="hidden status-banner"
+          role="status"
+          aria-live="polite"
+        >
+          <span class="status-spinner" aria-hidden="true"></span>
+          <span class="status-message" data-status-message></span>
+        </div>
+
+        <!-- Success Container -->
+        <div
+          id="successContainer"
+          class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
+        ></div>
+      </div>
 
       <!-- Dynamic views (like most-recent-videos.html, etc.) -->
       <main id="viewContainer" class="flex-grow mb-8"></main>