Merge pull request #17796 from silentoplayz/truncate-selector-tags

fix: truncate long filter tags in model selector and prevent wrapping
This commit is contained in:
Tim Jaeryang Baek 2025-09-26 14:35:58 -05:00 committed by GitHub
commit a80d5240f6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -435,7 +435,7 @@
}} }}
> >
<div <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} 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} {#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} {/if}
{#each tags as tag} {#each tags as tag}
<button <Tooltip content={tag}>
class="min-w-fit outline-none px-1.5 py-0.5 {selectedTag === 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} : 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
on:click={() => { aria-pressed={selectedTag === tag}
selectedConnectionType = ''; on:click={() => {
selectedTag = tag; selectedConnectionType = '';
}} selectedTag = tag;
> }}
{tag} >
</button> {tag.length > 16 ? `${tag.slice(0, 16)}...` : tag}
</button>
</Tooltip>
{/each} {/each}
</div> </div>
</div> </div>