From 6c6062cc584b35be5297a7042ff8e846d304b012 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 25 Jun 2021 16:44:09 +0200
Subject: [PATCH] Make styling of DropdownMenu easier by introducing
 dropdown-content

---
 ts/components/DropdownMenu.svelte | 9 +++++++--
 ts/editor/TagAutocomplete.svelte  | 4 +---
 ts/editor/TagEditor.svelte        | 4 +++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 2a0bdeb74..5e09c50b2 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -7,17 +7,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { dropdownKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+
     export let labelledby: string | undefined = undefined;
 
     setContext(dropdownKey, null);
 </script>
 
 <div {id} class="dropdown-menu" aria-labelledby={labelledby}>
-    <slot />
+    <div class={`dropdown-content ${className}`}>
+        <slot />
+    </div>
 </div>
 
 <style lang="scss">
-    div {
+    .dropdown-menu {
         background-color: var(--frame-bg);
         border-color: var(--medium-border);
     }
diff --git a/ts/editor/TagAutocomplete.svelte b/ts/editor/TagAutocomplete.svelte
index 6a541061a..c87783b60 100644
--- a/ts/editor/TagAutocomplete.svelte
+++ b/ts/editor/TagAutocomplete.svelte
@@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div bind:this={menu} class={`dropup dropdown-reverse ${className}`}>
     <slot />
 
-    <DropdownMenu>
+    <DropdownMenu class="d-flex flex-column-reverse">
         {#each suggestions as tag}
             <DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
                 >{tag}</DropdownItem
@@ -47,8 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .dropdown-reverse :global(.dropdown-menu.show) {
-        display: flex;
-        flex-direction: column-reverse;
         font-size: 13px;
     }
 </style>
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 1dafb0e69..bc0520612 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { isApplePlatform } from "lib/platform";
     import StickyBottom from "components/StickyBottom.svelte";
     import AddTagBadge from "./AddTagBadge.svelte";
     import Tag from "./Tag.svelte";
@@ -11,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { attachId, getName } from "./tags";
 
     export let initialNames = ["en::foobar", "test", "def"];
+    export let size = isApplePlatform() ? 1.6 : 2.0;
 
     let tags = initialNames.map(attachId);
     let newInput: HTMLInputElement;
@@ -88,7 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBottom>
     <div class="font-size-13 row-gap">
-        <TagAutocomplete class="d-flex flex-wrap align-items-center row-gap">
+        <TagAutocomplete class="d-flex flex-wrap align-items-center">
             <AddTagBadge on:click={focusNewInput} />
 
             {#each tags as tag, index (tag.id)}