From 43345cd9aabb57b3f0b1018ab5682df7c6ecb2ac Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Thu, 12 Aug 2021 12:49:32 -0500
Subject: [PATCH] Fix layout shift caused by captions, progress bar

---
 src/packager/P4.svelte              |  2 +-
 src/packager/PackagerOptions.svelte | 10 ++++------
 src/packager/Section.svelte         | 10 ++++++++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/packager/P4.svelte b/src/packager/P4.svelte
index 3091f7d..07e7436 100644
--- a/src/packager/P4.svelte
+++ b/src/packager/P4.svelte
@@ -161,7 +161,7 @@
   {/if}
 
   {#if $progress.visible}
-    <Section>
+    <Section center>
       <Progress progress={$progress.progress} text={$progress.text} />
     </Section>
   {/if}
diff --git a/src/packager/PackagerOptions.svelte b/src/packager/PackagerOptions.svelte
index fe98b72..3907fef 100644
--- a/src/packager/PackagerOptions.svelte
+++ b/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>
diff --git a/src/packager/Section.svelte b/src/packager/Section.svelte
index c3b25cb..422ec9a 100644
--- a/src/packager/Section.svelte
+++ b/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>