root
/
open-webui
mirror of https://github.com/open-webui/open-webui.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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.
This commit is contained in:
silentoplayz 2025-09-26 15:03:44 -04:00
parent af6a25eed7
commit b516431569
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/chat/ModelSelector/Selector.svelte
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>