Make styling of DropdownMenu easier by introducing dropdown-content

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);
     }

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>

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)}