From 46e607a7773ea533422cfc11ae3637a1a2e88b19 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Jul 2021 02:08:53 +0200
Subject: [PATCH] Fix TagSpacer

---
 ts/editor/ClozeButton.svelte     | 2 +-
 ts/editor/TagEditor.svelte       | 4 ++--
 ts/editor/TemplateButtons.svelte | 5 +----
 ts/editor/tagEditor.ts           | 6 +-----
 4 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index fe06ce54e..2068b8930 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <OnlyEditable let:disabled>
         <IconButton
             tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
-            disabled={disabled}
+            {disabled}
             on:click={onCloze}
             on:mount={withButton(createShortcut)}
         >
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index ee08f476b..04166a625 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -378,7 +378,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <StickyBottom class="d-flex" bind:height>
     {#if !wrap}
         <TagOptionsBadge
-            --button-size={`${size}rem`}
+            --buttons-size={`${size}rem`}
             showSelectionsOptions={tags.some((tag) => tag.selected)}
             bind:badgeHeight
             on:tagselectall={selectAllTags}
@@ -389,7 +389,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {/if}
 
     <ButtonToolbar
-        class="align-items-center mx-1"
+        class="d-flex align-items-center w-100 px-1"
         {size}
         {wrap}
         on:focusout={deselectIfLeave}
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 58beb683d..499897512 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -89,10 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithDropdown let:createDropdown>
             <OnlyEditable let:disabled>
-                <IconButton
-                    {disabled}
-                    on:mount={withButton(createDropdown)}
-                >
+                <IconButton {disabled} on:mount={withButton(createDropdown)}>
                     {@html functionIcon}
                 </IconButton>
             </OnlyEditable>
diff --git a/ts/editor/tagEditor.ts b/ts/editor/tagEditor.ts
index 4f1c3733c..6e71f09b0 100644
--- a/ts/editor/tagEditor.ts
+++ b/ts/editor/tagEditor.ts
@@ -6,14 +6,11 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import { disabledKey, nightModeKey } from "components/context-keys";
-import { writable } from "svelte/store";
+import { nightModeKey } from "components/context-keys";
 
 import TagEditor from "./TagEditor.svelte";
 import "./bootstrap.css";
 
-const disabled = writable(false);
-
 export function initTagEditor(i18n: Promise<void>): Promise<TagEditor> {
     let tagEditorResolve: (value: TagEditor) => void;
     const tagEditorPromise = new Promise<TagEditor>((resolve) => {
@@ -26,7 +23,6 @@ export function initTagEditor(i18n: Promise<void>): Promise<TagEditor> {
             const anchor = document.getElementById("tag-editor-anchor")!;
 
             const context = new Map();
-            context.set(disabledKey, disabled);
             context.set(
                 nightModeKey,
                 document.documentElement.classList.contains("night-mode")