浏览代码

Fix: truncate long model tags with a character limit

Long model tags on the Models page in the workspace section were not truncated consistently, which could cause layout issues.

This change implements a hard character limit of 32 characters on the model tags. Tags longer than 32 characters are truncated with an ellipsis (...) directly in the code. The full tag name remains available in the tooltip.
silentoplayz 2 周之前
父节点
当前提交
ac6292b812
共有 1 个文件被更改,包括 12 次插入10 次删除
  1. 12 10
      src/lib/components/workspace/Models.svelte

+ 12 - 10
src/lib/components/workspace/Models.svelte

@@ -305,16 +305,18 @@
 				</button>
 
 				{#each tags as tag}
-					<button
-						class="min-w-fit outline-none p-1.5 {selectedTag === tag
-							? ''
-							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
-						on:click={() => {
-							selectedTag = tag;
-						}}
-					>
-						{tag}
-					</button>
+					<Tooltip content={tag}>
+						<button
+							class="min-w-fit outline-none p-1.5 {selectedTag === tag
+								? ''
+								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
+							on:click={() => {
+								selectedTag = tag;
+							}}
+						>
+							{tag.length > 32 ? `${tag.slice(0, 32)}...` : tag}
+						</button>
+					</Tooltip>
 				{/each}
 			</div>
 		</div>