fix: responsive modal import model (#3449)

janhq · Aug 26, 2024 · 6d33ff6 · 6d33ff6
1 parent 925cd04
commit 6d33ff6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 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 flex-1">
+      <ScrollArea className="w-full md: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
@@ -114,7 +114,7 @@ const ModelDownloadRow: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex w-[662px] flex-row items-center justify-between space-x-1 rounded border border-[hsla(var(--app-border))] p-3">
+    <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">
@@ -124,7 +124,9 @@ const ModelDownloadRow: React.FC<Props> = ({
         <h1 className="mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]">
           {fileName}
         </h1>
-        <Badge theme="secondary">{toGibibytes(fileSize)}</Badge>
+        <Badge theme="secondary" className="hidden md:flex">
+          {toGibibytes(fileSize)}
+        </Badge>
       </div>
 
       {isDownloaded ? (

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/index.tsx b/web/screens/Settings/HuggingFaceRepoDetailModal/index.tsx
@@ -40,9 +40,8 @@ const HuggingFaceRepoDetailModal = () => {
       fullPage
       content={
         <div className="flex h-full w-full flex-col">
-          <div className="flex">
+          <div className="flex flex-col gap-4 lg:flex-row">
             <ModelSegmentInfo />
-            <div className="mx-6 h-full border border-[hsla(var(--app-border))]" />
             <ModelDownloadList />
           </div>
         </div>