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

web/containers/Loader/ModelStart.tsx

@@ -36,13 +36,13 @@ export default function ModelStart() {
 
   return (
     <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
           className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
           style={{ width: `${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'}
           &nbsp;model&nbsp;
           {stateModel.model?.id}

web/containers/ModelDropdown/index.tsx

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