From 81110da8ea64aa99b9fecc70ca3a6fbdd613d002 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 3 Oct 2024 20:19:07 +0700
Subject: [PATCH] fix: overlap text model selector and loading (#3757)

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

diff --git a/web/containers/Loader/ModelStart.tsx b/web/containers/Loader/ModelStart.tsx
index 420d803c8..1eb22f25e 100644
--- a/web/containers/Loader/ModelStart.tsx
+++ b/web/containers/Loader/ModelStart.tsx
@@ -42,7 +42,7 @@ export default function ModelStart() {
           style={{ width: `${loader}%` }}
           data-testid="model-loader"
         />
-        <span className="relative z-10">
+        <span className="relative z-10 line-clamp-1 max-w-[300px]">
           {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 192c18131..aa9dab236 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -318,7 +318,9 @@ const ModelDropdown = ({
             )}
             onClick={() => setOpen(!open)}
           >
-            <span className="line-clamp-1 ">{selectedModel?.name}</span>
+            <span className="line-clamp-1 max-w-[286px]">
+              {selectedModel?.name}
+            </span>
           </Badge>
         ) : (
           <Input