From 5e8a27b0108a0007d31154484ac47f65acb1df3c Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 15 Oct 2024 12:57:37 +0700
Subject: [PATCH] fix: issue ellipsis text on model selector and loader model
 start (#3802)

---
 web/containers/Loader/ModelStart.tsx   | 4 ++--
 web/containers/ModelDropdown/index.tsx | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/containers/Loader/ModelStart.tsx b/web/containers/Loader/ModelStart.tsx
index 1eb22f25e..d5dfbca56 100644
--- a/web/containers/Loader/ModelStart.tsx
+++ b/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}
diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index aa9dab236..0ac016a60 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/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