From 9499bc15052e8729b4e08a1e475c02cc040d2b7a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Jul 2021 22:58:28 +0200
Subject: [PATCH] Adjust position so tags do not even move a single pixel when
 going into editing

---
 ts/editor/Tag.svelte       |  2 +-
 ts/editor/TagEditor.svelte | 93 ++++++++++++++++++++------------------
 ts/editor/TagInput.svelte  |  3 --
 3 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index 20f53d597..a00d312a0 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -54,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <svelte:body on:keydown={setDeleteIcon} on:keyup={setDeleteIcon} />
 
 <button
-    class={`tag btn d-inline-flex align-items-center text-nowrap rounded ps-2 pe-1 ${className}`}
+    class={`tag btn d-inline-flex align-items-center text-nowrap rounded ps-2 pe-1 m-0 ${className}`}
     class:selected
     class:flashing
     class:select-mode={selectMode}
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 4d7ae115f..ab185de58 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -362,7 +362,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {size}
         on:focusout={deselectIfLeave}
     >
-        <div class="pad" on:mousedown|preventDefault>
+        <div class="gap" on:mousedown|preventDefault>
             {#if tags.some((tag) => tag.selected)}
                 <SelectedTagBadge
                     on:tagcopy={copySelectedTags}
@@ -374,7 +374,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </div>
 
         {#each tags as tag, index (tag.id)}
-            <div class="position-relative pad" class:hide-tag={index === active}>
+            <div class="position-relative gap" class:hide-tag={index === active}>
                 <Tag
                     class="me-1"
                     name={tag.name}
@@ -393,45 +393,47 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 />
 
                 {#if index === active}
-                    <WithAutocomplete
-                        class="d-flex flex-column-reverse dropup"
-                        {suggestionsPromise}
-                        on:update={updateSuggestions}
-                        on:autocomplete={({ detail }) =>
-                            onAutocomplete(detail.selected)}
-                        on:choose={({ detail }) => onChosen(detail.chosen)}
-                        let:createAutocomplete
-                    >
-                        <TagInput
-                            id={tag.id}
-                            class="position-absolute top-0 start-0"
-                            bind:name={activeName}
-                            bind:input={activeInput}
-                            on:focus={() => {
-                                activeName = tag.name;
-                                autocomplete = createAutocomplete(activeInput);
-                            }}
-                            on:keydown={onKeydown}
-                            on:keyup={onKeyup}
-                            on:input={() => updateTagName(tag)}
-                            on:tagsplit={({ detail }) =>
-                                enterBehavior(index, detail.start, detail.end)}
-                            on:tagadd={() => insertTag(index)}
-                            on:tagdelete={() => deleteTagAt(index)}
-                            on:tagjoinprevious={() => joinWithPreviousTag(index)}
-                            on:tagjoinnext={() => joinWithNextTag(index)}
-                            on:tagmoveprevious={() => moveToPreviousTag(index)}
-                            on:tagmovenext={() => moveToNextTag(index)}
-                            on:tagaccept={() => {
-                                deleteTagIfNotUnique(tag, index);
-                                if (tag) {
-                                    updateTagName(tag);
-                                }
-                                saveTags();
-                                decideNextActive();
-                            }}
-                        />
-                    </WithAutocomplete>
+                    <div class="adjust-position">
+                        <WithAutocomplete
+                            class="d-flex flex-column-reverse dropup"
+                            {suggestionsPromise}
+                            on:update={updateSuggestions}
+                            on:autocomplete={({ detail }) =>
+                                onAutocomplete(detail.selected)}
+                            on:choose={({ detail }) => onChosen(detail.chosen)}
+                            let:createAutocomplete
+                        >
+                            <TagInput
+                                id={tag.id}
+                                class="tag-input position-absolute top-0 start-0 ps-2 py-0"
+                                bind:name={activeName}
+                                bind:input={activeInput}
+                                on:focus={() => {
+                                    activeName = tag.name;
+                                    autocomplete = createAutocomplete(activeInput);
+                                }}
+                                on:keydown={onKeydown}
+                                on:keyup={onKeyup}
+                                on:input={() => updateTagName(tag)}
+                                on:tagsplit={({ detail }) =>
+                                    enterBehavior(index, detail.start, detail.end)}
+                                on:tagadd={() => insertTag(index)}
+                                on:tagdelete={() => deleteTagAt(index)}
+                                on:tagjoinprevious={() => joinWithPreviousTag(index)}
+                                on:tagjoinnext={() => joinWithNextTag(index)}
+                                on:tagmoveprevious={() => moveToPreviousTag(index)}
+                                on:tagmovenext={() => moveToNextTag(index)}
+                                on:tagaccept={() => {
+                                    deleteTagIfNotUnique(tag, index);
+                                    if (tag) {
+                                        updateTagName(tag);
+                                    }
+                                    saveTags();
+                                    decideNextActive();
+                                }}
+                            />
+                        </WithAutocomplete>
+                    </div>
                 {/if}
             </div>
         {/each}
@@ -452,7 +454,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         opacity: 0;
     }
 
-    .pad {
-        padding-bottom: 0.15rem;
+    .gap {
+        margin-bottom: 0.15rem;
+    }
+
+    .adjust-position :global(.tag-input) {
+        /* recreates positioning of Tag component */
+        border-left: 1px solid transparent;
     }
 </style>
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index 9c6344126..f3a3b3262 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -192,9 +192,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     input {
-        padding-left: 9.5px;
-        padding-bottom: 5.5px;
-
         width: 100%;
         height: 100%;