diff --git a/package-lock.json b/package-lock.json
index 404ce92..37576ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "2.50.2",
 			"devDependencies": {
 				"@biomejs/biome": "2.5.8",
+				"@floating-ui/dom": "^1.8.0",
 				"@intergrav/famfamfam-silk-svg": "^1.0.0",
 				"@sveltejs/vite-plugin-svelte": "^7.3.0",
 				"@tsconfig/svelte": "^5.0.8",
@@ -1855,6 +1856,34 @@
 				"tslib": "^2.4.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+			"integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.12"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+			"integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.8.0",
+				"@floating-ui/utils": "^0.2.12"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+			"integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@img/sharp-darwin-arm64": {
 			"version": "0.33.5",
 			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
diff --git a/package.json b/package.json
index 1a51e13..86b8df3 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
 		"@types/node": "^26.2.0",
 		"@types/spark-md5": "^3.0.5",
 		"@vite-pwa/assets-generator": "^1.0.2",
+		"@floating-ui/dom": "^1.8.0",
 		"colorthief": "^3.5.0",
 		"heroicons": "^2.2.0",
 		"knip": "^6.32.2",
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index 623ed45..e17a1ec 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+import {
+	autoUpdate,
+	computePosition,
+	flip,
+	offset,
+	shift,
+} from "@floating-ui/dom";
 import { untrack } from "svelte";
 import { fade } from "svelte/transition";
 import { Virtualizer, type VirtualizerHandle } from "virtua/svelte";
@@ -99,6 +106,8 @@ type NodeState = {
 let query = $state("");
 let searchHovered = $state(false);
 let searchHelpVisible = $state(false);
+let searchInput = $state<HTMLInputElement>();
+let searchHelp = $state<HTMLElement>();
 let results = $state<Record<string, unknown> | null>(null);
 let nodeStates = $state<Record<string, NodeState>>({});
 let menu = $state<{
@@ -109,6 +118,7 @@ let menu = $state<{
 } | null>(null);
 let libraryElement = $state<HTMLElement>();
 let virtualizer = $state<VirtualizerHandle>();
+let headerHeight = $state(0);
 const scrollFadeEnabled = $derived(
 	settings.transparentOutlines && !prefersReducedTransparency.current,
 );
@@ -211,6 +221,26 @@ $effect(() => {
 	return () => clearTimeout(timer);
 });
 
+$effect(() => {
+	const reference = searchInput;
+	const floating = searchHelp;
+	if (!searchHelpVisible || !reference || !floating) return;
+
+	const updatePosition = () => {
+		void computePosition(reference, floating, {
+			strategy: "fixed",
+			placement: "bottom-start",
+			middleware: [offset(8), flip(), shift({ padding: 16 })],
+		}).then(({ x, y }) => {
+			floating.style.left = `${x}px`;
+			floating.style.top = `${y}px`;
+		});
+	};
+
+	updatePosition();
+	return autoUpdate(reference, floating, updatePosition);
+});
+
 $effect(() => {
 	untrack(() => {
 		for (const key of Object.keys(nodeStates)) {
@@ -742,8 +772,11 @@ function onKey(event: KeyboardEvent) {
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <nav
+	bind:this={libraryElement}
 	id="library"
+	class:scroll-fade={scrollFadeEnabled}
 	aria-label={t("common.library")}
+	use:scrollFade={scrollFadeEnabled}
 	onfocusin={() => (ui.activeContext = "library")}
 	onkeydown={onKey}
 	onclick={(e) => {
@@ -751,35 +784,39 @@ function onKey(event: KeyboardEvent) {
 	}}
 	tabindex="0"
 >
-	<div class="library-header">
-		<div class="search-help-wrapper">
-			<input
-				id="search"
-				type="search"
-				bind:value={query}
-				aria-label={t("common.search")}
-				aria-describedby={searchHelpVisible ? "search-help" : undefined}
-				placeholder={t("common.search")}
-				onfocusin={(e) => e.stopPropagation()}
-				onmouseenter={() => (searchHovered = true)}
-				onmouseleave={() => (searchHovered = false)}
-				onclick={(e) => e.stopPropagation()}
-			/>
-			{#if searchHelpVisible}
-				<div
-					id="search-help"
-					class="search-help"
-					role="tooltip"
-					out:fade={{ duration: animationsEnabled() ? 400 : 0 }}
-				>
-					albums:newest, albums:random, albums:highest, albums:frequent, albums:recent, albums:starred, albums:alphabetical, albums:alphabeticalByArtist, albums:year:2002, albums:year:2000-2010, albums:genre:Jazz<br />
-					<br />
-					songs:random, songs:genre:Jazz, songs:year:2002, songs:year:2000-2010<br />
-					<br />
-					?size=500
-				</div>
-			{/if}
-		</div>
+	<div class="library-header" bind:clientHeight={headerHeight}>
+		<input
+			bind:this={searchInput}
+			id="search"
+			type="search"
+			bind:value={query}
+			aria-label={t("common.search")}
+			aria-describedby={searchHelpVisible ? "search-help" : undefined}
+			placeholder={t("common.search")}
+			onfocusin={(e) => e.stopPropagation()}
+			onmouseenter={() => (searchHovered = true)}
+			onmouseleave={() => (searchHovered = false)}
+			onclick={(e) => e.stopPropagation()}
+		/>
+		{#if searchHelpVisible}
+			<div
+				bind:this={searchHelp}
+				id="search-help"
+				class="search-help"
+				role="tooltip"
+				out:fade={{ duration: animationsEnabled() ? 400 : 0 }}
+				{@attach (element) => {
+					document.body.append(element);
+					return () => element.remove();
+				}}
+			>
+				albums:newest, albums:random, albums:highest, albums:frequent, albums:recent, albums:starred, albums:alphabetical, albums:alphabeticalByArtist, albums:year:2002, albums:year:2000-2010, albums:genre:Jazz<br />
+				<br />
+				songs:random, songs:genre:Jazz, songs:year:2002, songs:year:2000-2010<br />
+				<br />
+				?size=500
+			</div>
+		{/if}
 		{#if offlineManager.queuedRequests.length > 0 && !ui.miniplayer}
 			<button
 				type="button"
@@ -790,17 +827,12 @@ function onKey(event: KeyboardEvent) {
 			</button>
 		{/if}
 	</div>
-	<div
-		bind:this={libraryElement}
-		class="library-scroll"
-		class:scroll-fade={scrollFadeEnabled}
-		use:scrollFade={scrollFadeEnabled}
-	>
-		<Virtualizer
+	<Virtualizer
 		bind:this={virtualizer}
 		data={visibleRows}
 		getKey={(row) => row.key}
 		scrollRef={libraryElement}
+		startMargin={headerHeight}
 		as="ul"
 		item="li"
 	>
@@ -866,8 +898,7 @@ function onKey(event: KeyboardEvent) {
 				/>
 			{/if}
 		{/snippet}
-		</Virtualizer>
-	</div>
+	</Virtualizer>
 </nav>
 
 {#if menu}
@@ -883,28 +914,18 @@ function onKey(event: KeyboardEvent) {
 <style>
 	#library {
 		flex: 1;
-		min-block-size: 0;
-		display: flex;
-		flex-direction: column;
+		overflow-y: auto;
 		padding: 0 1rem 0.5rem;
 	}
 	.library-header {
 		padding-block-start: 0.5rem;
 	}
-	.library-scroll {
-		flex: 1;
-		min-block-size: 0;
-		overflow-y: auto;
-	}
-	.search-help-wrapper {
-		position: relative;
-		z-index: 1;
-	}
 	.search-help {
-		position: absolute;
-		z-index: 1;
-		inset-block-start: calc(100% + 0.5rem);
-		inset-inline-start: 0;
+		position: fixed;
+		z-index: 30;
+		top: 0;
+		left: 0;
+		inline-size: max-content;
 		max-inline-size: min(45rem, calc(100vw - 2rem));
 		padding-block: 0.25rem;
 		padding-inline: 0.5rem;
@@ -932,7 +953,7 @@ function onKey(event: KeyboardEvent) {
 	input {
 		inline-size: 100%;
 	}
-	:global(.library-scroll > ul) {
+	:global(#library > ul) {
 		padding: 0;
 		margin: 0;
 		list-style: none;