mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
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:
commit
a80d5240f6
1 changed files with 15 additions and 13 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue