also fixes flash messages

scipaperloader/static/js/common.js

@@ -33,35 +33,50 @@ 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(() => {
+    removeFlashMessage(flashMsg);
+  }, 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();
-        // Reposition remaining messages
+      updateFlashMessagePositions();
-        const remainingMessages = document.querySelectorAll('.flash-overlay');
-        remainingMessages.forEach((msg, index) => {
-          msg.style.setProperty('--flash-index', index);
-        });
     }
   }, 300);
-  }, duration);
+}
 
-  return flashMsg;
+/**
+ * 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
+  });
 }
 
 /**