also fixes flash messages

scipaperloader/static/js/common.js

@@ -12,7 +12,7 @@ function showFlashMessage(message, type = "success", duration = 5000) {
   const flashMsg = document.createElement("div");
   const normalizedType = type === "error" ? "danger" : type;
   flashMsg.className = `flash-overlay flash-${normalizedType}`;
-  
+
   // Get the appropriate icon based on type
   const getIcon = (messageType) => {
     switch (messageType) {
@@ -33,37 +33,52 @@ function showFlashMessage(message, type = "success", duration = 5000) {
     <div class="flash-content">
       ${getIcon(normalizedType)}
       <div class="flash-message">${message}</div>
-      <button type="button" class="flash-close" onclick="this.parentElement.parentElement.remove()">×</button>
+      <button type="button" class="flash-close" onclick="removeFlashMessage(this.parentElement.parentElement)">×</button>
     </div>
   `;
 
-  // Handle stacking of multiple messages
+  // Add to page first
-  const existingMessages = document.querySelectorAll('.flash-overlay');
-  existingMessages.forEach((msg, index) => {
-    msg.style.setProperty('--flash-index', index + 1);
-  });
-
-  // Add to page
   document.body.appendChild(flashMsg);
 
+  // Position all messages in stack
+  updateFlashMessagePositions();
+
   // Auto dismiss
   setTimeout(() => {
-    flashMsg.classList.add("fade-out");
+    removeFlashMessage(flashMsg);
-    setTimeout(() => {
-      if (flashMsg.parentNode) {
-        flashMsg.remove();
-        // Reposition remaining messages
-        const remainingMessages = document.querySelectorAll('.flash-overlay');
-        remainingMessages.forEach((msg, index) => {
-          msg.style.setProperty('--flash-index', index);
-        });
-      }
-    }, 300);
   }, duration);
 
   return flashMsg;
 }
 
+/**
+ * Remove a flash message and update positions
+ * @param {HTMLElement} flashMsg - The flash message element to remove
+ */
+function removeFlashMessage(flashMsg) {
+  if (!flashMsg || !flashMsg.parentNode) return;
+
+  flashMsg.classList.add("fade-out");
+  setTimeout(() => {
+    if (flashMsg.parentNode) {
+      flashMsg.remove();
+      updateFlashMessagePositions();
+    }
+  }, 300);
+}
+
+/**
+ * Update positions of all flash messages to create a proper stack
+ */
+function updateFlashMessagePositions() {
+  const messages = document.querySelectorAll(".flash-overlay:not(.fade-out)");
+  messages.forEach((msg, index) => {
+    const topPosition = 20 + index * 90; // 90px spacing between messages
+    msg.style.top = `${topPosition}px`;
+    msg.style.zIndex = 9999 - index; // Higher z-index for newer messages
+  });
+}
+
 /**
  * Create a status badge HTML element
  * @param {string} status - The status to create a badge for