fix: broken several ui when model name too long (#2728)
This commit is contained in:
Faisal Amir
GitHub
parent
20657bb3da
commit
49401bd8eb
@ -266,12 +266,36 @@ const DropdownListSidebar = ({
|
||||
value={x.id}
|
||||
className={twMerge(
|
||||
x.id === selectedModel?.id && 'bg-secondary',
|
||||
'my-0 pb-8 pt-4'
|
||||
'my-0 py-2'
|
||||
)}
|
||||
>
|
||||
<div className="relative flex w-full justify-between">
|
||||
<span className="line-clamp-1 block">{x.name}</span>
|
||||
<div className="absolute right-0 top-2 space-x-2">
|
||||
<div className="flex w-full items-center justify-between gap-x-4">
|
||||
<div className="max-w-[200px]">
|
||||
<p className="line-clamp-2">{x.name}</p>
|
||||
<div
|
||||
className={twMerge(
|
||||
'mt-2 inline-flex items-center space-x-2 text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
<p className="line-clamp-2 text-xs">{x.id}</p>
|
||||
{clipboard.copied && copyId === x.id ? (
|
||||
<CheckIcon
|
||||
size={16}
|
||||
className="flex-shrink-0 text-green-600"
|
||||
/>
|
||||
) : (
|
||||
<CopyIcon
|
||||
size={16}
|
||||
className="z-20 flex-shrink-0 cursor-pointer"
|
||||
onClick={() => {
|
||||
clipboard.copy(x.id)
|
||||
setCopyId(x.id)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 space-x-2">
|
||||
<span className="font-bold text-muted-foreground">
|
||||
{toGibibytes(x.metadata.size)}
|
||||
</span>
|
||||
@ -281,25 +305,6 @@ const DropdownListSidebar = ({
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<div
|
||||
className={twMerge(
|
||||
'absolute -mt-6 inline-flex items-center space-x-2 px-4 pb-2 text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="text-xs">{x.id}</span>
|
||||
{clipboard.copied && copyId === x.id ? (
|
||||
<CheckIcon size={16} className="text-green-600" />
|
||||
) : (
|
||||
<CopyIcon
|
||||
size={16}
|
||||
className="z-20 cursor-pointer"
|
||||
onClick={() => {
|
||||
clipboard.copy(x.id)
|
||||
setCopyId(x.id)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
@ -34,7 +34,7 @@ const TableActiveModel = () => {
|
||||
return (
|
||||
<th
|
||||
key={i}
|
||||
className="px-6 py-2 text-left font-normal last:text-center"
|
||||
className="px-4 py-2 text-left font-normal last:text-center"
|
||||
>
|
||||
{col}
|
||||
</th>
|
||||
@ -46,17 +46,27 @@ const TableActiveModel = () => {
|
||||
<Fragment>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="px-6 py-2 font-bold">{activeModel.name}</td>
|
||||
<td className="px-6 py-2 font-bold">{activeModel.id}</td>
|
||||
<td className="px-6 py-2">
|
||||
<td
|
||||
className="max-w-[200px] px-4 py-2 font-bold"
|
||||
title={activeModel.name}
|
||||
>
|
||||
<p className="line-clamp-2">{activeModel.name}</p>
|
||||
</td>
|
||||
<td
|
||||
className="max-w-[200px] px-4 py-2 font-bold"
|
||||
title={activeModel.id}
|
||||
>
|
||||
<p className="line-clamp-2">{activeModel.id}</p>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<Badge themes="secondary">
|
||||
{toGibibytes(activeModel.metadata.size)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-2">
|
||||
<td className="px-4 py-2">
|
||||
<Badge themes="secondary">v{activeModel.version}</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-2 text-center">
|
||||
<td className="px-4 py-2 text-center">
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="w-full">
|
||||
<Button
|
||||
|
||||
@ -195,7 +195,7 @@ const Advanced = () => {
|
||||
</div>
|
||||
|
||||
{/* CPU / GPU switching */}
|
||||
{!isMac && (
|
||||
{isMac && (
|
||||
<div className="flex w-full flex-col items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
|
||||
<div className="flex w-full items-start justify-between">
|
||||
<div className="space-y-1.5">
|
||||
@ -223,6 +223,8 @@ const Advanced = () => {
|
||||
for further assistance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{gpuList.length > 0 && !gpuEnabled && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
@ -291,6 +293,7 @@ const Advanced = () => {
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 w-full rounded-lg bg-secondary p-4">
|
||||
<label className="mb-1 inline-block font-medium">
|
||||
Choose device(s)
|
||||
|
||||
@ -63,19 +63,23 @@ export default function RowModel(props: RowModelProps) {
|
||||
|
||||
return (
|
||||
<tr className="relative border-b border-border last:border-none">
|
||||
<td className="px-6 py-4 font-bold">{props.data.name}</td>
|
||||
<td className="px-6 py-4 font-bold">{props.data.id}</td>
|
||||
<td className="px-6 py-4">
|
||||
<td className="max-w-[200px] p-4 font-bold" title={props.data.name}>
|
||||
<p className="line-clamp-2">{props.data.name}</p>
|
||||
</td>
|
||||
<td className="max-w-[200px] p-4 font-bold" title={props.data.id}>
|
||||
<p className="line-clamp-2">{props.data.id}</p>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<Badge themes="secondary">
|
||||
{props.data.metadata.size
|
||||
? toGibibytes(props.data.metadata.size)
|
||||
: '-'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<td className="p-4">
|
||||
<Badge themes="secondary">v{props.data.version}</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<td className="p-4">
|
||||
{isRemoteModel ? (
|
||||
<Badge
|
||||
themes="success"
|
||||
@ -112,7 +116,7 @@ export default function RowModel(props: RowModelProps) {
|
||||
</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<td className="p-4 text-center">
|
||||
{!isRemoteModel && (
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user