improve: make progresses stacked.

src/lib/components/backupRestoreBox.svelte

@@ -94,7 +94,7 @@
 
                     if ($collection === 'restorations') {
                         const { newId, newName } =
-                        collectionMap.get($id).options?.['databases']?.['database'][0] || {};
+                            collectionMap.get($id).options?.['databases']?.['database'][0] || {};
 
                         showRestoreNotification(newId, newName);
                     }
@@ -171,10 +171,10 @@
             {@const titleText = isBackup ? 'Creating Backup' : 'Creating Restoration'}
 
             {#if items.size > 0}
-                <section class="upload-box is-float">
+                <section class="upload-box">
                     <header class="upload-box-header">
                         <h4 class="upload-box-title">
-                            <span class="text">{titleText}</span>
+                            <span class="text">{titleText} ({items.size})</span>
                         </h4>
                         <button
                             class="upload-box-button"
@@ -239,17 +239,6 @@
         justify-content: center;
     }
 
-    .box-holder {
-        right: 0;
-        bottom: 0;
-        display: flex;
-        position: fixed;
-    }
-
-    .is-float {
-        position: relative;
-    }
-
     .backup-name {
         font-size: 12px;
         font-weight: 400;
@@ -259,10 +248,4 @@
         color: var(--mid-neutrals-50, #818186);
         font-family: var(--font-family-sansSerif, Inter);
     }
-
-    @media (max-width: 768px) {
-        .is-float {
-            position: fixed;
-        }
-    }
 </style>

src/lib/components/migrationBox.svelte

@@ -66,7 +66,7 @@
 </script>
 
 {#if $showMigrationBox && migration}
-    <section class="upload-box is-float">
+    <section class="upload-box">
         <header class="upload-box-header">
             <h4 class="upload-box-title">
                 <span class="text">Importing Data</span>
@@ -93,9 +93,18 @@
 {/if}
 
 <style>
+    .upload-box-title {
+        font-size: 11px;
+    }
+
     .upload-box-content {
-        padding: 1.5rem;
         min-width: 400px;
         max-width: 100vw;
     }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 </style>

src/lib/components/uploadBox.svelte

@@ -13,7 +13,7 @@
 </script>
 
 {#if $uploader?.isOpen}
-    <section class="upload-box is-float">
+    <section class="upload-box">
         <header class="upload-box-header">
             <h4 class="upload-box-title">
                 <span class="text">Uploading files</span>
@@ -101,3 +101,20 @@
         </div>
     </section>
 {/if}
+
+<style>
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .upload-box-content {
+        min-width: 400px;
+        max-width: 100vw;
+    }
+</style>

src/routes/(console)/project-[project]/+layout.svelte

@@ -103,7 +103,29 @@
 
 <slot />
 
-<UploadBox />
-<MigrationBox />
+<div class="layout-level-progress-bars">
+    <UploadBox />
+    <MigrationBox />
 
-<BackupRestoreBox />
+    <BackupRestoreBox />
+</div>
+
+<style>
+    .layout-level-progress-bars {
+        gap: 1rem;
+        display: flex;
+        flex-direction: column;
+
+        right: 0;
+        bottom: 0;
+        position: fixed;
+        padding: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+        .layout-level-progress-bars {
+            position: relative;
+            align-items: center;
+        }
+    }
+</style>