fix model picker quirks

src/routes/canvas/chat-node.svelte

@@ -159,8 +159,8 @@
 
 	<!-- Add node button -->
 	<button
-		class="abs-x-center absolute -bottom-4 flex items-center gap-1.5 rounded-full
-		bg-black px-4 py-2 text-xs font-medium
+		class="abs-x-center absolute -bottom-4 z-10 flex items-center gap-1.5
+		rounded-full bg-black px-4 py-2 text-xs font-medium
 		text-white shadow-sm transition-all hover:scale-[1.02]
 		hover:bg-gray-900 focus:ring-2 focus:ring-gray-900/20 focus:outline-none active:scale-[0.98]"
 		onclick={() => {
@@ -201,8 +201,6 @@
 
 <Handle type="target" position={Position.Top} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
 <Handle type="source" position={Position.Bottom} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
-<Handle type="source" position={Position.Left} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
-<Handle type="source" position={Position.Right} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
 
 <!-- <NodeResizeControl minWidth={200} minHeight={150}> -->
 <!-- 	<IconResize class="absolute right-2 bottom-2" /> -->

src/routes/canvas/model-picker.svelte

@@ -112,6 +112,10 @@
 			// Return the content for highlighting
 			return typeof nextItem.content === "object" ? nextItem.content.id : null;
 		},
+		onOpenChange: o => {
+			if (o || !modelId) return;
+			combobox.inputValue = modelId;
+		},
 	});
 
 	$effect(() => {
@@ -122,91 +126,96 @@
 </script>
 
 <div class="relative w-full">
-	<label class="mb-1.5 block text-xs font-medium text-gray-600">Model</label>
+	<label class="block space-y-1.5 text-xs font-medium text-gray-600">
+		<p>Model</p>
 
-	<!-- Combobox input -->
-	<input
-		class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm
+		<!-- Combobox input -->
+		<input
+			class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm
 		text-gray-900 placeholder-gray-500 transition-colors focus:border-gray-900 focus:ring-2
 		focus:ring-gray-900/10 focus:outline-none"
-		placeholder="Search and select a model..."
-		bind:value={query}
-		{...combobox.input}
-	/>
+			placeholder="Search and select a model..."
+			bind:value={query}
+			{...combobox.input}
+		/>
+	</label>
 
 	<!-- Combobox content -->
 	<div
-		class="absolute z-50 mt-1 hidden max-h-80 w-full overflow-hidden rounded-lg border
-		border-gray-200 bg-white shadow-lg data-[open]:block"
+		class="absolute z-50 mt-1 hidden max-h-80 w-full !min-w-[400px] overflow-hidden overflow-y-auto
+		rounded-lg border border-gray-200 bg-white shadow-lg data-[open]:block"
 		{...combobox.content}
-		popover={undefined}
+		{...virtualScroll.container}
+		onscroll={e => {
+			e.stopPropagation();
+			e.preventDefault();
+			virtualScroll.container.onscroll(e);
+		}}
 	>
 		<!-- Virtualized model list -->
-		<div class="max-h-80 overflow-y-auto" {...virtualScroll.container}>
-			{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
-				{@const [nameSpace, modelName] = model.id.split("/")}
-				<div
-					class="flex w-full cursor-pointer items-center px-3 py-2 text-sm
+		{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
+			{@const [nameSpace, modelName] = model.id.split("/")}
+			<div
+				class="flex w-full cursor-pointer items-center px-3 py-2 text-sm
 						hover:bg-gray-50 data-[highlighted]:bg-gray-100"
-					{...combobox.getOption(model.id)}
-				>
-					{#if trending}
-						<div class="mr-1.5 size-4 text-yellow-400">
-							<IconStar />
-						</div>
-					{/if}
-
-					{#if modelName}
-						<span class="inline-flex items-center">
-							<span class="text-gray-500">{nameSpace}</span>
-							<span class="mx-1 text-gray-300">/</span>
-							<span class="text-black">{modelName}</span>
-						</span>
+				{...combobox.getOption(model.id)}
+			>
+				{#if trending}
+					<div class="mr-1.5 size-4 text-yellow-400">
+						<IconStar />
+					</div>
+				{/if}
+
+				{#if modelName}
+					<span class="inline-flex items-center">
+						<span class="text-gray-500">{nameSpace}</span>
+						<span class="mx-1 text-gray-300">/</span>
+						<span class="text-black">{modelName}</span>
+					</span>
+				{:else}
+					<span class="text-black">{nameSpace}</span>
+				{/if}
+
+				{#if "pipeline_tag" in model && model.pipeline_tag === "image-text-to-text"}
+					<Tooltip openDelay={100}>
+						{#snippet trigger(tooltip)}
+							<div
+								class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
+								{...tooltip.trigger}
+							>
+								<IconEye class="size-3.5" />
+							</div>
+						{/snippet}
+						Image text-to-text
+					</Tooltip>
+				{/if}
+
+				{#if isCustom(model)}
+					<Tooltip openDelay={100}>
+						{#snippet trigger(tooltip)}
+							<div
+								class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
+								{...tooltip.trigger}
+							>
+								<IconCube class="size-3.5" />
+							</div>
+						{/snippet}
+						Custom Model
+					</Tooltip>
+				{/if}
+			</div>
+		{/snippet}
+
+		<!-- Virtual scroll container -->
+		<div style="height: {virtualScroll.totalHeight}px; position: relative;">
+			<div style="transform: translateY({virtualScroll.offsetY}px);">
+				{#each virtualScroll.getVisibleItems(allFilteredModels) as { item }}
+					{#if item.type === "header"}
+						<div class="bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-500">{item.content}</div>
 					{:else}
-						<span class="text-black">{nameSpace}</span>
-					{/if}
-
-					{#if "pipeline_tag" in model && model.pipeline_tag === "image-text-to-text"}
-						<Tooltip openDelay={100}>
-							{#snippet trigger(tooltip)}
-								<div
-									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
-									{...tooltip.trigger}
-								>
-									<IconEye class="size-3.5" />
-								</div>
-							{/snippet}
-							Image text-to-text
-						</Tooltip>
-					{/if}
-
-					{#if isCustom(model)}
-						<Tooltip openDelay={100}>
-							{#snippet trigger(tooltip)}
-								<div
-									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
-									{...tooltip.trigger}
-								>
-									<IconCube class="size-3.5" />
-								</div>
-							{/snippet}
-							Custom Model
-						</Tooltip>
+						{@render modelEntry(item.content, item.trending)}
 					{/if}
-				</div>
-			{/snippet}
-
-			<!-- Virtual scroll container -->
-			<div style="height: {virtualScroll.totalHeight}px; position: relative;">
-				<div style="transform: translateY({virtualScroll.offsetY}px);">
-					{#each virtualScroll.getVisibleItems(allFilteredModels) as { item }}
-						{#if item.type === "header"}
-							<div class="bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-500">{item.content}</div>
-						{:else}
-							{@render modelEntry(item.content, item.trending)}
-						{/if}
-					{/each}
-				</div>
+				{/each}
 			</div>
 		</div>
 	</div>