From 7e928c52cf4c52a0102fd2ce4b0a6fe2f4d8c92b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 28 Aug 2024 13:57:50 +0700
Subject: [PATCH] fix: responsive modal import model gguf

---
 .../ModelDownloadList/index.tsx               |  2 +-
 .../ModelDownloadRow/index.tsx                | 30 ++++++++++++-------
 .../ModelSegmentInfo/index.tsx                |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
index e6285565f7..e59ee3416d 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
@@ -29,7 +29,7 @@ const ModelDownloadList = () => {
   return (
     <div className="flex h-[500px] flex-1 flex-col">
       <h1 className="mb-3 font-semibold">Available Versions</h1>
-      <ScrollArea className="w-full lg:flex-1">
+      <ScrollArea className="h-full w-full lg:flex-1">
         {ggufModels.map((model, index) => {
           if (!model.downloadUrl) return null
           return (
diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
index 98914c94ec..951a11d59e 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
@@ -10,6 +10,8 @@ import { Badge, Button, Progress } from '@janhq/joi'
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { twMerge } from 'tailwind-merge'
+
 import { MainViewState } from '@/constants/screens'
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
@@ -114,16 +116,24 @@ const ModelDownloadRow: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex flex-col gap-4 space-x-1 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between lg:w-[550px]">
-      <div className="flex">
-        {quantization && (
-          <Badge variant="soft" className="mr-1">
-            {quantization}
-          </Badge>
-        )}
-        <h1 className="mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]">
-          {fileName}
-        </h1>
+    <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">
+          {quantization && (
+            <Badge variant="soft" className="mr-1">
+              {quantization}
+            </Badge>
+          )}
+          <h1
+            className={twMerge(
+              'mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]',
+              quantization && 'max-w-[25ch]'
+            )}
+            title={fileName}
+          >
+            {fileName}
+          </h1>
+        </div>
         <Badge theme="secondary" className="hidden md:flex">
           {toGibibytes(fileSize)}
         </Badge>
diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
index ba17e9b57a..10f4515c82 100644
--- a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
+++ b/web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
@@ -33,7 +33,7 @@ const ModelSegmentInfo = () => {
   if (!importingHuggingFaceRepoData) return null
 
   return (
-    <div className="flex w-full flex-col space-y-4">
+    <div className="flex w-full flex-col space-y-4 lg:w-1/3">
       <HeaderInfo title={'Model ID'}>
         <h1 className="font-medium text-zinc-500 dark:text-gray-300">
           {modelName}