Fix layout shift caused by captions, progress bar

src/packager/P4.svelte

@@ -161,7 +161,7 @@
   {/if}
 
   {#if $progress.visible}
-    <Section>
+    <Section center>
       <Progress progress={$progress.progress} text={$progress.text} />
     </Section>
   {/if}

src/packager/PackagerOptions.svelte

@@ -164,9 +164,6 @@
   .option-group {
     margin-bottom: 12px;
   }
-  .downloads {
-    text-align: center;
-  }
   input:invalid {
     outline: 2px solid red;
   }
@@ -497,13 +494,14 @@
 </Section>
 
 {#if result && url}
-  <Section>
-    <div class="downloads">
+  <Section center>
+    <p>
       <a href={url} download={result.filename}>
         {$_('options.download')
           .replace('{filename}', result.filename)
           .replace('{size}', (result.blob.size / 1000 / 1000).toFixed(2))}
-    </div>
+      </a>
+    </p>
   </Section>
 {:else if !$progress.visible}
   <Section caption>

src/packager/Section.svelte

@@ -1,5 +1,6 @@
 <script>
   export let caption = false;
+  export let center = false;
   export let modal = false;
   export let accent = '';
 </script>
@@ -19,7 +20,6 @@
     background: #222;
   }
   .caption {
-    text-align: center;
     font-style: italic;
   }
   .modal {
@@ -27,8 +27,14 @@
     max-width: 400px;
     margin: 0 8px;
   }
+  .center {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>
 
-<div class="card" class:caption class:modal style={accent ? `border-top: 6px solid ${accent}` : ''}>
+<div class="card" class:caption class:modal class:center={caption || center} style={accent ? `border-top: 6px solid ${accent}` : ''}>
   <slot></slot>
 </div>