WebUI: Replace illegal nested button elements (#21026)

* remove/replace nested button elements

* map rest props to outer element

* solve TODO

* chore: update webui build output

tools/server/webui/src/lib/components/app/models/ModelId.svelte

@@ -18,7 +18,8 @@
 		showRaw = undefined,
 		aliases,
 		tags,
-		class: className = ''
+		class: className = '',
+		...rest
 	}: Props = $props();
 
 	const badgeClass =
@@ -36,9 +37,9 @@
 </script>
 
 {#if resolvedShowRaw}
-	<TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} />
+	<TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} {...rest} />
 {:else}
-	<span class="flex min-w-0 flex-wrap items-center gap-1 {className}">
+	<span class="flex min-w-0 flex-wrap items-center gap-1 {className}" {...rest}>
 		<span class="min-w-0 truncate font-medium">
 			{#if showOrgName && parsed.orgName && !(aliases && aliases.length > 0)}{parsed.orgName}/{/if}{displayName}
 		</span>

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -271,50 +271,49 @@
 		{#if isRouter}
 			<DropdownMenu.Root bind:open={isOpen} onOpenChange={handleOpenChange}>
 				<DropdownMenu.Trigger
-					disabled={disabled || updating}
+					class={cn(
-					onclick={(e) => {
+						`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
-						e.preventDefault();
+						!isCurrentModelInCache
-						e.stopPropagation();
+							? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
-					}}
+							: forceForegroundText
-				>
+								? 'text-foreground'
-					<button
+								: isHighlightedCurrentModelActive
-						type="button"
-						class={cn(
-							`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
-							!isCurrentModelInCache
-								? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
-								: forceForegroundText
 									? 'text-foreground'
-									: isHighlightedCurrentModelActive
+									: 'text-muted-foreground',
-										? 'text-foreground'
+						isOpen ? 'text-foreground' : ''
-										: 'text-muted-foreground',
+					)}
-							isOpen ? 'text-foreground' : ''
+					style="max-width: min(calc(100cqw - 9rem), 20rem)"
-						)}
+					disabled={disabled || updating}
-						style="max-width: min(calc(100cqw - 9rem), 20rem)"
+				>
-						disabled={disabled || updating}
+					<Package class="h-3.5 w-3.5" />
-					>
-						<Package class="h-3.5 w-3.5" />
 
-						{#if selectedOption}
+					{#if selectedOption}
-							<Tooltip.Root>
+						<Tooltip.Root>
-								<Tooltip.Trigger class="min-w-0 overflow-hidden">
+							<Tooltip.Trigger>
-									<ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
+								<!-- prevent another nested button element -->
-								</Tooltip.Trigger>
+								{#snippet child({ props })}
+									<ModelId
+										modelId={selectedOption.model}
+										class="min-w-0 overflow-hidden"
+										showOrgName
+										{...props}
+									/>
+								{/snippet}
+							</Tooltip.Trigger>
 
-								<Tooltip.Content>
+							<Tooltip.Content>
-									<p class="font-mono">{selectedOption.model}</p>
+								<p class="font-mono">{selectedOption.model}</p>
-								</Tooltip.Content>
+							</Tooltip.Content>
-							</Tooltip.Root>
+						</Tooltip.Root>
-						{:else}
+					{:else}
-							<span class="min-w-0 font-medium">Select model</span>
+						<span class="min-w-0 font-medium">Select model</span>
-						{/if}
+					{/if}
 
-						{#if updating || isLoadingModel}
+					{#if updating || isLoadingModel}
-							<Loader2 class="h-3 w-3.5 animate-spin" />
+						<Loader2 class="h-3 w-3.5 animate-spin" />
-						{:else}
+					{:else}
-							<ChevronDown class="h-3 w-3.5" />
+						<ChevronDown class="h-3 w-3.5" />
-						{/if}
+					{/if}
-					</button>
 				</DropdownMenu.Trigger>
 
 				<DropdownMenu.Content
@@ -407,8 +406,16 @@
 
 				{#if selectedOption}
 					<Tooltip.Root>
-						<Tooltip.Trigger class="min-w-0 overflow-hidden">
+						<Tooltip.Trigger>
-							<ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
+							<!-- prevent another nested button element -->
+							{#snippet child({ props })}
+								<ModelId
+									modelId={selectedOption.model}
+									class="min-w-0 overflow-hidden"
+									showOrgName
+									{...props}
+								/>
+							{/snippet}
 						</Tooltip.Trigger>
 
 						<Tooltip.Content>