From b516431569b57d58de54d84b1e9d0269b59d597e Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Fri, 26 Sep 2025 15:03:44 -0400
Subject: [PATCH] fix: truncate long filter tags in model selector and prevent
 wrapping

This commit addresses an issue where long filter tags at the top of the model selector dropdown were not truncated correctly and would wrap to a new line, causing layout issues.

- A hard character limit of 16 characters is applied to the filter tags within the `Selector.svelte` component. Tags longer than 16 characters are truncated with an ellipsis (...) directly in the code. The full tag name remains available in the tooltip.
- The `whitespace-nowrap` class has been added to the tag container to ensure that the tags remain on a single, horizontally scrollable line.
---
 .../chat/ModelSelector/Selector.svelte        | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 29eb85eb40..ddf4e2d3ca 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -435,7 +435,7 @@
 						}}
 					>
 						<div
-							class="flex gap-1 w-fit text-center text-sm rounded-full bg-transparent px-1.5"
+							class="flex gap-1 w-fit text-center text-sm rounded-full bg-transparent px-1.5 whitespace-nowrap"
 							bind:this={tagsContainerElement}
 						>
 							{#if items.find((item) => item.model?.connection_type === 'local') || items.find((item) => item.model?.connection_type === 'external') || items.find((item) => item.model?.direct) || tags.length > 0}
@@ -500,18 +500,20 @@
 							{/if}
 
 							{#each tags as tag}
-								<button
-									class="min-w-fit outline-none px-1.5 py-0.5 {selectedTag === tag
-										? ''
-										: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
-									aria-pressed={selectedTag === tag}
-									on:click={() => {
-										selectedConnectionType = '';
-										selectedTag = tag;
-									}}
-								>
-									{tag}
-								</button>
+								<Tooltip content={tag}>
+									<button
+										class="min-w-fit outline-none px-1.5 py-0.5 {selectedTag === tag
+											? ''
+											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
+										aria-pressed={selectedTag === tag}
+										on:click={() => {
+											selectedConnectionType = '';
+											selectedTag = tag;
+										}}
+									>
+										{tag.length > 16 ? `${tag.slice(0, 16)}...` : tag}
+									</button>
+								</Tooltip>
 							{/each}
 						</div>
 					</div>