From 0154199161e5fa56e4d421af76e8842904146903 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 6 Nov 2024 13:41:49 +0700
Subject: [PATCH] fix: text alignment on import model dialog (#3958)

---
 .../ModelDownloadRow/index.tsx                         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
index 9c2ff14a5..5d679913e 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
@@ -118,7 +118,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 max-w-[50%] justify-between">
-        <div className="flex">
+        <div className="flex min-w-[280px] max-w-[280px]">
           {quantization && (
             <Badge variant="soft" className="mr-1">
               {quantization}
@@ -133,9 +133,11 @@ const ModelDownloadRow: React.FC<Props> = ({
             {fileName}
           </h1>
         </div>
-        <Badge theme="secondary" className="hidden md:flex">
-          {toGibibytes(fileSize)}
-        </Badge>
+        <div className="md:min-w-[90px] md:max-w-[90px]">
+          <Badge theme="secondary" className="ml-4 hidden md:flex">
+            {toGibibytes(fileSize)}
+          </Badge>
+        </div>
       </div>
 
       {downloadedModel ? (