From 27c6ac6c8d365b00470f4e53977d0c080ca02e59 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 2 Oct 2024 15:08:59 +0700
Subject: [PATCH] fix: overlap text model selector and loading (#3756)

---
 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 420d803c8e..1eb22f25e9 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 192c181312..aa9dab2368 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