From b1f41cae415d0590e165ee71519d418e067478f5 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 9 Sep 2024 01:17:34 +0600
Subject: [PATCH] web/remux: tweak progress appearance

---
 web/src/routes/remux/+page.svelte | 66 ++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/web/src/routes/remux/+page.svelte b/web/src/routes/remux/+page.svelte
index 5a83d839..5d09dd13 100644
--- a/web/src/routes/remux/+page.svelte
+++ b/web/src/routes/remux/+page.svelte
@@ -208,24 +208,26 @@
     </div>
 
     <div id="remux-processing" class:processing aria-hidden={!processing}>
-        {#if processing}
-            {#if progress && speed}
-                <div class="progress-bar">
-                    <Skeleton
-                        width="{progress}%"
-                        height="20px"
-                        class="elevated"
-                    />
-                </div>
-                <div class="progress-text">
-                    processing ({progress}%, {speed}x)...
-                </div>
+        <div id="processing-status">
+            {#if processing}
+                {#if progress && speed}
+                    <div class="progress-bar">
+                        <Skeleton
+                            width="{progress}%"
+                            height="20px"
+                            class="elevated"
+                        />
+                    </div>
+                    <div class="progress-text">
+                        processing ({progress}%, {speed}x)...
+                    </div>
+                {:else}
+                    processing...
+                {/if}
             {:else}
-                processing...
+                done!
             {/if}
-        {:else}
-            done!
-        {/if}
+        </div>
     </div>
 </DropReceiver>
 
@@ -258,13 +260,6 @@
         pointer-events: none;
     }
 
-    .progress-bar {
-        height: 20px;
-        width: 400px;
-        border-radius: 6px;
-        background: var(--button);
-    }
-
     #remux-processing.processing {
         opacity: 1;
         transform: none;
@@ -276,6 +271,27 @@
         pointer-events: none;
     }
 
+    #processing-status {
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding);
+        gap: var(--padding);
+        justify-content: center;
+    }
+
+    .progress-bar {
+        height: 20px;
+        width: 400px;
+        max-width: 400px;
+        border-radius: 6px;
+        background: var(--button);
+    }
+
+    .progress-text {
+        font-size: 14px;
+        text-align: center;
+    }
+
     .remux-description {
         font-size: 14px;
         line-height: 1.5;
@@ -285,5 +301,9 @@
         .remux-description {
             font-size: 12px;
         }
+
+        .progress-bar {
+            width: 350px;
+        }
     }
 </style>