From d93aefdaaa68764fb5cb4bd9a23fe8b4fe53528d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 23:25:13 +0200
Subject: [PATCH] Fix sticky toolbar which was broken when introducing
 var(--toolbar-size)

---
 ts/editor-toolbar/EditorToolbar.svelte | 27 ++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 19895d124..0bb9a4caf 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -27,11 +27,16 @@
     $: _menus = $menus;
 
     export let nightMode: boolean;
-    export let size: number = 30;
-    export let wraps: boolean = true;
 
     setContext(nightModeKey, nightMode);
     setContext(disabledKey, disabled);
+
+    export let size: number = 30;
+    export let wraps: boolean = true;
+
+    $: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
+        wraps ? "wrap" : "nowrap"
+    }`;
 </script>
 
 <style lang="scss">
@@ -57,14 +62,12 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? 'wrap' : 'nowrap'}`}>
-    <div>
-        {#each _menus as menu}
-            <svelte:component this={menu.component} {...menu} />
-        {/each}
-    </div>
-
-    <nav>
-        <ButtonGroup buttons={_buttons} />
-    </nav>
+<div {style}>
+    {#each _menus as menu}
+        <svelte:component this={menu.component} {...menu} />
+    {/each}
 </div>
+
+<nav {style}>
+    <ButtonGroup buttons={_buttons} />
+</nav>