From b0087fca49add447c65ae3a22f7ce5002e0cc3d2 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 1 Nov 2024 17:55:27 +0700
Subject: [PATCH] fix: text align my model list and import model (#3927)

---
 .../HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx   | 5 ++---
 web/screens/Settings/MyModels/MyModelList/index.tsx         | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
index c3f09f171..9c2ff14a5 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
@@ -117,7 +117,7 @@ const ModelDownloadRow: React.FC<Props> = ({
 
   return (
     <div className="flex flex-col gap-4 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between xl:w-full">
-      <div className="flex justify-between">
+      <div className="flex max-w-[50%] justify-between">
         <div className="flex">
           {quantization && (
             <Badge variant="soft" className="mr-1">
@@ -126,8 +126,7 @@ const ModelDownloadRow: React.FC<Props> = ({
           )}
           <h1
             className={twMerge(
-              'mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]',
-              quantization && 'max-w-[25ch]'
+              'mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]'
             )}
             title={fileName}
           >
diff --git a/web/screens/Settings/MyModels/MyModelList/index.tsx b/web/screens/Settings/MyModels/MyModelList/index.tsx
index c9ca6e867..7557e9952 100644
--- a/web/screens/Settings/MyModels/MyModelList/index.tsx
+++ b/web/screens/Settings/MyModels/MyModelList/index.tsx
@@ -85,7 +85,7 @@ const MyModelList = ({ model }: Props) => {
             <div className="relative flex items-center gap-x-4">
               {stateModel.loading && stateModel.model?.id === model.id ? (
                 <Badge
-                  className="inline-flex items-center space-x-2"
+                  className="inline-flex w-[80px] items-center space-x-2"
                   theme="secondary"
                 >
                   <span className="h-2 w-2 rounded-full bg-gray-500" />
@@ -99,7 +99,7 @@ const MyModelList = ({ model }: Props) => {
                 <Badge
                   theme="success"
                   variant="soft"
-                  className="inline-flex items-center space-x-2"
+                  className="inline-flex w-[80px] items-center space-x-2"
                 >
                   <span className="h-2 w-2 rounded-full bg-green-500" />
                   <span>Active</span>
@@ -107,7 +107,7 @@ const MyModelList = ({ model }: Props) => {
               ) : (
                 <Badge
                   theme="secondary"
-                  className="inline-flex items-center space-x-2"
+                  className="inline-flex w-[80px] items-center space-x-2"
                 >
                   <span className="h-2 w-2 rounded-full bg-gray-500" />
                   <span>Inactive</span>