diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte index 1e1df35..434ae61 100644 --- a/src/routes/admin/posts/[id]/+page.svelte +++ b/src/routes/admin/posts/[id]/+page.svelte @@ -53,6 +53,30 @@ let isAddingTag = $state(false); let showTagDropdown = $state(false); + let tagInputContainer = $state(); + let tagDropdownTop = $state(0); + let tagDropdownBottom = $state(0); + let tagDropdownLeft = $state(0); + let tagDropdownWidth = $state(0); + let tagDropdownUpwards = $state(false); + + function updateTagDropdownPosition() { + if (tagInputContainer) { + const rect = tagInputContainer.getBoundingClientRect(); + const spaceBelow = window.innerHeight - rect.bottom; + const spaceAbove = rect.top; + if (spaceBelow < 200 && spaceAbove > spaceBelow) { + tagDropdownUpwards = true; + tagDropdownBottom = window.innerHeight - rect.top; + } else { + tagDropdownUpwards = false; + tagDropdownTop = rect.bottom; + } + tagDropdownLeft = rect.left; + tagDropdownWidth = rect.width; + } + } + let filteredTags = $derived( (() => { const input = newTagInput.trim().toLowerCase(); @@ -121,6 +145,7 @@ {/if} + (showTagDropdown = false)} />
@@ -172,7 +197,7 @@ -
+
(showTagDropdown = false)}> @@ -244,14 +269,17 @@ {/each}
-
+
(showTagDropdown = true)} + onfocus={() => { + updateTagDropdownPosition(); + showTagDropdown = true; + }} onblur={() => setTimeout(() => (showTagDropdown = false), 200)} disabled={isAddingTag} autocomplete="off" @@ -259,7 +287,16 @@ /> {#if showTagDropdown && filteredTags.length > 0} -
+
{#each filteredTags as tag (tag.id || tag)}
-
+
(showTagDropdown = false)}> @@ -274,14 +299,17 @@ {/each}
-
+
(showTagDropdown = true)} + onfocus={() => { + updateTagDropdownPosition(); + showTagDropdown = true; + }} onblur={() => setTimeout(() => (showTagDropdown = false), 200)} disabled={isAddingTag} autocomplete="off" @@ -289,7 +317,16 @@ /> {#if showTagDropdown && filteredTags.length > 0} -
+
{#each filteredTags as tag (tag.id || tag)}