From 69c626511107c1454fbea9fa0776a457b653fc85 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 9 Sep 2021 19:03:06 +0200
Subject: [PATCH] Align suggestions with start of tag

---
 ts/components/WithDropdown.svelte | 36 ++++++++++++++++++++++++-------
 ts/editor/AutocompleteItem.svelte |  3 +++
 ts/editor/WithAutocomplete.svelte |  2 +-
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/ts/components/WithDropdown.svelte b/ts/components/WithDropdown.svelte
index 498e2c27e..fe2fbeb2c 100644
--- a/ts/components/WithDropdown.svelte
+++ b/ts/components/WithDropdown.svelte
@@ -13,15 +13,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let toggleOpen = true;
     export let drop: "down" | "up" = "down";
+    export let align: "start" | "end" | "auto" = "auto";
 
-    let placement: "bottom" | "top";
-    $: switch (drop) {
-        case "down":
-            placement = "bottom";
-            break;
-        case "up":
-            placement = "top";
-            break;
+    let placement: string;
+
+    $: {
+        let blockPlacement: string;
+
+        switch (drop) {
+            case "down":
+                blockPlacement = "bottom";
+                break;
+            case "up":
+                blockPlacement = "top";
+                break;
+        }
+
+        let inlinePlacement: string;
+
+        switch (align) {
+            case "start":
+            case "end":
+                inlinePlacement = `-${align}`;
+                break;
+            default:
+                inlinePlacement = "";
+                break;
+        }
+
+        placement = `${blockPlacement}${inlinePlacement}`;
     }
 
     $: dropClass = `drop${drop}`;
diff --git a/ts/editor/AutocompleteItem.svelte b/ts/editor/AutocompleteItem.svelte
index 198eebda9..271447325 100644
--- a/ts/editor/AutocompleteItem.svelte
+++ b/ts/editor/AutocompleteItem.svelte
@@ -50,6 +50,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .autocomplete-item {
         padding: 1px 7px 2px;
+
+        text-align: start;
+        white-space: nowrap;
     }
 
     button {
diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/WithAutocomplete.svelte
index 44dacb726..e7c793448 100644
--- a/ts/editor/WithAutocomplete.svelte
+++ b/ts/editor/WithAutocomplete.svelte
@@ -146,7 +146,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<WithDropdown {drop} toggleOpen={false} let:createDropdown>
+<WithDropdown {drop} toggleOpen={false} let:createDropdown align="start">
     <slot createAutocomplete={createAutocomplete(createDropdown)} />
 
     <DropdownMenu class={className} {show}>