From 8d1f3d0703a828473e906475d43487a10e5ce934 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Mon, 28 Sep 2026 20:42:36 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E4=BF=AE=E5=A4=8D=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 patch_tags.mjs | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 patch_tags.mjs

diff --git a/patch_tags.mjs b/patch_tags.mjs
new file mode 100644
index 0000000..ecdad44
--- /dev/null
+++ b/patch_tags.mjs
@@ -0,0 +1,88 @@
+import fs from 'fs';
+
+function patchFile(filePath) {
+	let content = fs.readFileSync(filePath, 'utf8');
+
+	// Add state variables and position function
+	if (!content.includes('updateTagDropdownPosition')) {
+		const stateInsertion = `	let showTagDropdown = $state(false);
+	
+	let tagInputContainer = $state<HTMLDivElement>();
+	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;
+		}
+	}`;
+		content = content.replace(`	let showTagDropdown = $state(false);`, stateInsertion);
+	}
+
+	// Add onscroll to .form-sidebar
+	content = content.replace(
+		`<div class="form-sidebar">`,
+		`<div class="form-sidebar" onscroll={() => (showTagDropdown = false)}>`
+	);
+
+	// Also add window resize listener to close the dropdown
+	if (!content.includes('<svelte:window onresize={() => (showTagDropdown = false)} />')) {
+		content = content.replace(
+			`<form method="POST"`,
+			`<svelte:window onresize={() => (showTagDropdown = false)} />\n<form method="POST"`
+		);
+	}
+
+	// Bind tagInputContainer and update onfocus
+	content = content.replace(
+		`<div class="tag-input-container">`,
+		`<div class="tag-input-container" bind:this={tagInputContainer}>`
+	);
+
+	content = content.replace(
+		`onfocus={() => (showTagDropdown = true)}`,
+		`onfocus={() => { updateTagDropdownPosition(); showTagDropdown = true; }}`
+	);
+
+	// Add inline styles to the dropdown and update CSS
+	const oldDropdownStart = `<div class="tag-autocomplete-dropdown">`;
+	const newDropdownStart = `<div class="tag-autocomplete-dropdown" style="top: {tagDropdownUpwards ? 'auto' : \`\${tagDropdownTop}px\`}; bottom: {tagDropdownUpwards ? \`\${tagDropdownBottom}px\` : 'auto'}; left: {tagDropdownLeft}px; width: {tagDropdownWidth}px; margin-top: {tagDropdownUpwards ? '0' : '4px'}; margin-bottom: {tagDropdownUpwards ? '4px' : '0'};">`;
+	content = content.replace(oldDropdownStart, newDropdownStart);
+
+	const oldCss = `.tag-autocomplete-dropdown {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;`;
+	const newCss = `.tag-autocomplete-dropdown {
+		position: fixed;`;
+	content = content.replace(oldCss, newCss);
+
+	// There is a margin-top: 4px; in the CSS as well, let's remove it if it's there
+	content = content.replace(
+		`.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-top: 4px;\n\t}`,
+		`.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}`
+	);
+
+	// More generic css replacement for margin-top if it's separate
+	content = content.replace(`margin-top: 4px;`, ``);
+
+	fs.writeFileSync(filePath, content);
+}
+
+patchFile('src/routes/admin/posts/[id]/+page.svelte');
+patchFile('src/routes/admin/posts/new/+page.svelte');