Make tags stand less out in dark mode

ts/editor/Tag.svelte

@@ -49,15 +49,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mount={(event) => event.detail.input.focus()}
     />
 {:else}
-    <span
+    <button
-        class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"
+        class="d-inline-flex align-items-center tag text-nowrap rounded ps-2 pe-1 me-1"
+        tabindex="-1"
         on:click={checkForActivation}
     >
         <span>{name}</span>
         <Badge class="delete-icon rounded ms-1 mt-1" on:click={deleteTag}
             >{@html deleteIcon}</Badge
         >
-    </span>
+    </button>
 {/if}
 
 <style lang="scss">
@@ -66,4 +67,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag :global(.delete-icon > svg:hover) {
         background-color: $white-translucent;
     }
+
+    button {
+        padding: 0;
+    }
 </style>

ts/editor/TagAutocomplete.svelte

@@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ButtonToolbar from "components/ButtonToolbar.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
 
     export const suggestions = ["en::idioms", "anki::functionality", "math"];
+    export let size: number;
 
     let className: string = "";
     export { className as class };
 
-    let menu: HTMLDivElement;
-
     function switchUpDown(event: KeyboardEvent): void {
         const target = event.currentTarget as HTMLButtonElement;
         if (event.code === "ArrowUp") {
@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function updateActiveItem(even: FocusEvent): void {}
 </script>
 
-<div bind:this={menu} class={`dropup dropdown-reverse ${className}`}>
+<ButtonToolbar class={`dropup ${className}`} {size}>
     <slot />
 
     <DropdownMenu class="d-flex flex-column-reverse">
@@ -43,10 +43,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             >
         {/each}
     </DropdownMenu>
-</div>
+</ButtonToolbar>
-
-<style lang="scss">
-    .dropdown-reverse :global(.dropdown-menu.show) {
-        font-size: 13px;
-    }
-</style>

ts/editor/TagEditor.svelte

@@ -89,8 +89,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <StickyBottom>
-    <div class="font-size-13 row-gap">
+    <div class="row-gap">
-        <TagAutocomplete class="d-flex flex-wrap align-items-center">
+        <TagAutocomplete class="d-flex flex-wrap align-items-center" {size}>
             <AddTagBadge on:click={focusNewInput} />
 
             {#each tags as tag, index (tag.id)}
@@ -116,10 +116,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </StickyBottom>
 
 <style lang="scss">
-    .font-size-13 {
-        font-size: 13px;
-    }
-
     .row-gap > :global(.d-flex > *) {
         margin-bottom: 2px;
     }