From 63138bcad3405055b69bd7f810863b44f0fa2162 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 18 Sep 2026 14:34:20 +0200
Subject: [PATCH] web/repo: add a freezePosition prop to Combobox & improve
 LabelPanel layout

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/LabelPanel.svelte | 80 ++++++++++---------
 web/src/lib/components/ui/Combobox.svelte     | 60 ++++++++++++--
 2 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/web/src/lib/components/repo/LabelPanel.svelte b/web/src/lib/components/repo/LabelPanel.svelte
index 70da4edf0..e3e39108b 100644
--- a/web/src/lib/components/repo/LabelPanel.svelte
+++ b/web/src/lib/components/repo/LabelPanel.svelte
@@ -12,6 +12,7 @@
 
 <script lang="ts">
 	import Pencil from "$icon/pencil";
+	import TagPlus from "$icon/tag-plus";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
@@ -73,11 +74,48 @@
 {:else}
 	<div class="flex w-full flex-col items-start gap-4">
 		<section class="flex w-full flex-col items-start gap-2">
-			<div class="group flex w-full items-center justify-between">
+			<div class="flex w-full items-center justify-between">
 				{@render sectionHeading(labelsHeadingId, "Labels")}
+			</div>
+			<ul
+				aria-labelledby={labelsHeadingId}
+				class="group flex w-full flex-wrap items-center gap-2"
+			>
+				{#each shownLabels as label (label.name)}
+					<li class="flex">
+						{#if label.href}
+							<Link
+								href={label.href}
+								variant="inherit"
+								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75 hover:bg-background-subtle hover:no-underline"
+							>
+								{@render labelBall(label)}
+							</Link>
+						{:else}
+							<span
+								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75"
+							>
+								{@render labelBall(label)}
+							</span>
+						{/if}
+					</li>
+				{/each}
+				{#if hiddenCount > 0 && !expanded}
+					<li class="flex">
+						<Button
+							variant="ghost"
+							size="small"
+							onclick={() => (expanded = true)}
+							icon={TagPlus}
+						>
+							Display all {labels.length} labels
+						</Button>
+					</li>
+				{/if}
 				{#if canEdit}
 					<Combobox
 						multiple
+						freezePosition
 						align="right"
 						options={labelOptions}
 						values={pickedLabels}
@@ -95,14 +133,15 @@
 					>
 						{#snippet trigger({ props })}
 							<div
-								class="opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+								class="opacity-0 transition group-hover:opacity-100 has-focus-visible:opacity-100 has-aria-expanded:opacity-100"
 							>
 								<Button
 									{...props}
 									variant="ghost"
-									size="mini"
-									icon={Pencil}
+									size="small"
+									icon={TagPlus}
 									aria-label="Edit labels"
+									class="aria-expanded:bg-background-inset"
 								/>
 							</div>
 						{/snippet}
@@ -114,39 +153,6 @@
 						{/snippet}
 					</Combobox>
 				{/if}
-			</div>
-			<ul aria-labelledby={labelsHeadingId} class="flex w-full flex-wrap items-center gap-2">
-				{#each shownLabels as label (label.name)}
-					<li class="flex">
-						{#if label.href}
-							<Link
-								href={label.href}
-								variant="inherit"
-								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75 hover:bg-background-subtle hover:no-underline"
-							>
-								{@render labelBall(label)}
-							</Link>
-						{:else}
-							<span
-								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75"
-							>
-								{@render labelBall(label)}
-							</span>
-						{/if}
-					</li>
-				{/each}
-				{#if hiddenCount > 0 && !expanded}
-					<li class="flex">
-						<Button
-							variant="ghost"
-							size="small"
-							onclick={() => (expanded = true)}
-							icon={Plus}
-						>
-							Display all {labels.length} labels
-						</Button>
-					</li>
-				{/if}
 			</ul>
 		</section>
 	</div>
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index 07b08aa63..fafebabd0 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -36,6 +36,7 @@
 	import { tick } from "svelte";
 	import { createAttachmentKey } from "svelte/attachments";
 	import Input from "$lib/components/ui/Input.svelte";
+	import { popoverExit } from "$lib/popoverExit";
 	import { popoverOrigin, type PopoverOrigin } from "$lib/components/ui/popover.svelte";
 	import {
 		selectField,
@@ -69,6 +70,7 @@
 		option?: Snippet<[SelectOption]>;
 		filter?: boolean;
 		origin?: PopoverOrigin;
+		freezePosition?: boolean;
 	}
 
 	let {
@@ -96,7 +98,8 @@
 		trigger,
 		option,
 		filter = true,
-		origin
+		origin,
+		freezePosition = false
 	}: Props = $props();
 
 	const panelId = $props.id();
@@ -116,6 +119,9 @@
 	let panelEl = $state<HTMLElement>();
 	let searchEl = $state<HTMLInputElement>();
 	let listEl = $state<HTMLElement>();
+	let frozenPosition = $state<{ top: number; left: number }>();
+	let scrollOrigins: { element: Element; top: number; left: number }[] = [];
+	let scrollOffset = $state({ top: 0, left: 0 });
 
 	const query = $derived(search.trim().toLowerCase());
 	const visible = $derived(
@@ -201,13 +207,33 @@
 		open = newState === "open";
 		if (!open) return;
 
+		if (freezePosition && panelEl && triggerEl) {
+			const trigger = triggerEl.getBoundingClientRect();
+			const gap = Number.parseFloat(getComputedStyle(panelEl).marginTop) || 0;
+			const viewportInset =
+				Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / 2;
+			const left = align === "right" ? trigger.right - panelEl.offsetWidth : trigger.left;
+			frozenPosition = {
+				top: trigger.bottom + gap,
+				left: Math.max(
+					viewportInset,
+					Math.min(
+						left,
+						document.documentElement.clientWidth - panelEl.offsetWidth - viewportInset
+					)
+				)
+			};
+			scrollOffset = { top: 0, left: 0 };
+			scrollOrigins = [];
+			for (let element = triggerEl?.parentElement; element; element = element.parentElement) {
+				scrollOrigins.push({ element, top: element.scrollTop, left: element.scrollLeft });
+			}
+		}
+
 		search = "";
 		onSearch?.("");
-		const selectedIndex = multiple
-			? visible.findIndex((option) => values.includes(option.value))
-			: options.findIndex((option) => option.value === value);
-		setActive(selectable.includes(selectedIndex) ? selectedIndex : (selectable[0] ?? -1), true);
-		void tick().then(() => searchEl?.focus());
+		setActive(-1, false);
+		void tick().then(() => searchEl?.focus({ preventScroll: true }));
 	};
 
 	const onTriggerKeydown = (event: KeyboardEvent) => {
@@ -275,6 +301,21 @@
 		}
 	};
 
+	$effect(() => {
+		if (!open || !freezePosition) return;
+		const onScroll = () => {
+			scrollOffset = scrollOrigins.reduce(
+				(offset, { element, top, left }) => ({
+					top: offset.top + element.scrollTop - top,
+					left: offset.left + element.scrollLeft - left
+				}),
+				{ top: 0, left: 0 }
+			);
+		};
+		window.addEventListener("scroll", onScroll, true);
+		return () => window.removeEventListener("scroll", onScroll, true);
+	});
+
 	$effect(() => {
 		if (!open || !scrollActiveIntoView || activeIndex < 0) return;
 		listEl?.querySelector(`#${CSS.escape(optionId(activeIndex))}`)?.scrollIntoView({
@@ -307,8 +348,13 @@
 		data-align={align}
 		popover="auto"
 		ontoggle={onPanelToggle}
-		style="position-anchor: {anchorName}"
+		style={frozenPosition
+			? `position-anchor: none; position-area: none; position-try: none; position: fixed; inset: auto; margin: 0; top: ${frozenPosition.top - scrollOffset.top}px; left: ${frozenPosition.left - scrollOffset.left}px`
+			: `position-anchor: ${anchorName}`}
 		class={classes.panel({ class: panelClass })}
+		{@attach popoverExit((exiting) => {
+			if (!exiting) frozenPosition = undefined;
+		})}
 		{@attach popoverOrigin(
 			() => triggerEl,
 			() => origin
-- 
2.54.0