From ffb1f3bff29bd8e83b4f3a51229072113eb4ed67 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 6 Jul 2021 16:43:08 +0200
Subject: [PATCH] Space out Sticky Bottom with Spacer component

---
 ts/components/Spacer.svelte       | 12 ++++++++++++
 ts/components/StickyBottom.svelte |  4 +++-
 ts/editor/TagEditor.svelte        |  7 ++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 ts/components/Spacer.svelte

diff --git a/ts/components/Spacer.svelte b/ts/components/Spacer.svelte
new file mode 100644
index 000000000..e8fae91c6
--- /dev/null
+++ b/ts/components/Spacer.svelte
@@ -0,0 +1,12 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<div />
+
+<style lang="scss">
+    div {
+        width: var(--width, auto);
+        height: var(--height, auto);
+    }
+</style>
diff --git a/ts/components/StickyBottom.svelte b/ts/components/StickyBottom.svelte
index c23df4ee8..e62654bb0 100644
--- a/ts/components/StickyBottom.svelte
+++ b/ts/components/StickyBottom.svelte
@@ -6,9 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
+
+    export let height: number;
 </script>
 
-<footer {id} class={`container-fluid pt-1 ${className}`}>
+<footer {id} bind:offsetHeight={height} class={`container-fluid pt-1 ${className}`}>
     <slot />
 </footer>
 
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index a0f8dd22b..9aa77667f 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { tick } from "svelte";
     import { isApplePlatform } from "lib/platform";
     import { bridgeCommand } from "lib/bridgecommand";
+    import Spacer from "components/Spacer.svelte";
     import StickyBottom from "components/StickyBottom.svelte";
     import AddTagBadge from "./AddTagBadge.svelte";
     import SelectedTagBadge from "./SelectedTagBadge.svelte";
@@ -361,9 +362,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         deselect();
         saveTags();
     }
+
+    let height: number;
 </script>
 
-<StickyBottom>
+<Spacer --height={`${height}px`} />
+
+<StickyBottom bind:height>
     <ButtonToolbar
         class="d-flex flex-wrap align-items-center mx-1"
         {size}