fix: issue ellipsis text on model selector and loader model start (#3802)

This commit is contained in:
Faisal Amir 2024-10-15 12:57:37 +07:00 committed by GitHub
parent 5d628a2748
commit 5e8a27b010
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 6 deletions

View File

@ -36,13 +36,13 @@ export default function ModelStart() {
return ( return (
<div className=" mb-1 mt-2 py-2 text-center"> <div className=" mb-1 mt-2 py-2 text-center">
<div className="relative inline-block overflow-hidden rounded-lg bg-[hsla(var(--loader-bg))] px-4 py-2 font-semibold text-[hsla(var(--loader-fg))] shadow-lg"> <div className="relative inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap rounded-lg bg-[hsla(var(--loader-bg))] px-4 py-2 font-semibold text-[hsla(var(--loader-fg))] shadow-lg">
<div <div
className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]" className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
style={{ width: `${loader}%` }} style={{ width: `${loader}%` }}
data-testid="model-loader" data-testid="model-loader"
/> />
<span className="relative z-10 line-clamp-1 max-w-[300px]"> <span className="relative z-10">
{stateModel.state === 'start' ? 'Starting' : 'Stopping'} {stateModel.state === 'start' ? 'Starting' : 'Stopping'}
&nbsp;model&nbsp; &nbsp;model&nbsp;
{stateModel.model?.id} {stateModel.model?.id}

View File

@ -313,14 +313,12 @@ const ModelDropdown = ({
theme="secondary" theme="secondary"
variant={open ? 'solid' : 'outline'} variant={open ? 'solid' : 'outline'}
className={twMerge( className={twMerge(
'cursor-pointer', 'inline-block max-w-[200px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap',
open && 'border border-transparent' open && 'border border-transparent'
)} )}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
> >
<span className="line-clamp-1 max-w-[286px]"> <span>{selectedModel?.name}</span>
{selectedModel?.name}
</span>
</Badge> </Badge>
) : ( ) : (
<Input <Input