fix: responsive modal import model gguf

janhq · Aug 28, 2024 · 7e928c5 · 7e928c5
1 parent bc4bbd3
commit 7e928c5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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}