From 0a3d38125da56790e46f5909fbfa515dcc9e385f Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Thu, 13 Oct 2022 02:08:30 +0200
Subject: [PATCH] Add background to tag editor and improve autocomplete items
 (#2130)

---
 ts/tag-editor/AutocompleteItem.svelte | 16 +++++++++++-----
 ts/tag-editor/TagEditor.svelte        |  3 +++
 ts/tag-editor/WithAutocomplete.svelte |  4 ++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ts/tag-editor/AutocompleteItem.svelte b/ts/tag-editor/AutocompleteItem.svelte
index 3e9bf5982..cfec171a3 100644
--- a/ts/tag-editor/AutocompleteItem.svelte
+++ b/ts/tag-editor/AutocompleteItem.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let selected = false;
     export let active = false;
 
-    let buttonRef: HTMLButtonElement;
+    let buttonRef: HTMLElement;
 
     $: if (selected && buttonRef) {
         /* buttonRef.scrollIntoView({ behavior: "smooth", block: "start" }); */
@@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<button
+<div
     bind:this={buttonRef}
     tabindex="-1"
     class="autocomplete-item"
@@ -30,21 +30,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:mouseleave
 >
     <slot />
-</button>
+</div>
 
 <style lang="scss">
     @use "sass/vars";
     @use "sass/button-mixins" as button;
 
     .autocomplete-item {
-        @include button.base($with-disabled: false, $active-class: active);
-        padding: 1px 7px 2px;
+        padding: 4px 8px;
 
         text-align: start;
         white-space: nowrap;
         flex-grow: 1;
         border-radius: 0;
+        border: 1px solid transparent;
+        &:not(:first-child) {
+            border-top-color: var(--border-subtle);
+        }
 
+        &:hover {
+            @include button.base($with-disabled: false, $active-class: active);
+        }
         &.selected {
             @include button.base(
                 $primary: true,
diff --git a/ts/tag-editor/TagEditor.svelte b/ts/tag-editor/TagEditor.svelte
index f78797812..8b101b8c5 100644
--- a/ts/tag-editor/TagEditor.svelte
+++ b/ts/tag-editor/TagEditor.svelte
@@ -490,6 +490,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         flex-flow: row wrap;
         align-items: flex-end;
+        background: var(--canvas-inset);
+        border-radius: var(--border-radius);
+        padding: 6px;
     }
 
     .tag-relative {
diff --git a/ts/tag-editor/WithAutocomplete.svelte b/ts/tag-editor/WithAutocomplete.svelte
index 8bbb35bf6..5d2e146b6 100644
--- a/ts/tag-editor/WithAutocomplete.svelte
+++ b/ts/tag-editor/WithAutocomplete.svelte
@@ -186,9 +186,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         flex-flow: column nowrap;
 
         width: 80vw;
-        max-height: 7rem;
+        max-height: 30vh;
 
-        font-size: 11px;
+        font-size: 13px;
         overflow-x: hidden;
         text-overflow: ellipsis;
         overflow-y: auto;