fix: broken several ui when model name too long (#2728)

web/containers/DropdownListSidebar/index.tsx

@@ -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">
+                        <div className="flex w-full items-center justify-between gap-x-4">
-                          <span className="line-clamp-1 block">{x.name}</span>
+                          <div className="max-w-[200px]">
-                          <div className="absolute right-0 top-2 space-x-2">
+                            <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>
                   ))
                 )}

web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx

@@ -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
-                  <td className="px-6 py-2 font-bold">{activeModel.id}</td>
+                    className="max-w-[200px] px-4 py-2 font-bold"
-                  <td className="px-6 py-2">
+                    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

web/screens/Settings/Advanced/index.tsx

@@ -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)

web/screens/Settings/Models/Row.tsx

@@ -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="max-w-[200px] p-4 font-bold" title={props.data.name}>
-      <td className="px-6 py-4 font-bold">{props.data.id}</td>
+        <p className="line-clamp-2">{props.data.name}</p>
-      <td className="px-6 py-4">
+      </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"