From 7171bde1d95b1460a1781470264d456d7bac6cad Mon Sep 17 00:00:00 2001
From: James <james@jan.ai>
Date: Wed, 4 Oct 2023 19:49:03 -0700
Subject: [PATCH] fix not able to scroll in my models screen

Signed-off-by: James <james@jan.ai>
---
 web/app/_components/ActiveModelTable/index.tsx      |  4 ++--
 web/app/_components/DownloadedModelTable/index.tsx  |  4 ++--
 web/app/_components/DownloadingModelTable/index.tsx |  8 +++++---
 web/app/_components/HeaderTitle/index.tsx           |  9 ++++++---
 web/app/_components/MyModelContainer/index.tsx      | 12 +++++++-----
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/app/_components/ActiveModelTable/index.tsx b/web/app/_components/ActiveModelTable/index.tsx
index e2e3e791e..800740422 100644
--- a/web/app/_components/ActiveModelTable/index.tsx
+++ b/web/app/_components/ActiveModelTable/index.tsx
@@ -9,10 +9,10 @@ const ActiveModelTable: React.FC = () => {
   if (!activeModel) return null;
 
   return (
-    <Fragment>
+    <div className="pl-[63px] pr-[89px]">
       <h3 className="text-xl leading-[25px] mb-[13px]">Active Model(s)</h3>
       <ModelTable models={[activeModel]} />
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/web/app/_components/DownloadedModelTable/index.tsx b/web/app/_components/DownloadedModelTable/index.tsx
index 72ab2350a..d47fe344d 100644
--- a/web/app/_components/DownloadedModelTable/index.tsx
+++ b/web/app/_components/DownloadedModelTable/index.tsx
@@ -7,13 +7,13 @@ const DownloadedModelTable: React.FC = () => {
   const { downloadedModels } = useGetDownloadedModels();
 
   return (
-    <Fragment>
+    <div className="pl-[63px] pr-[89px]">
       <h3 className="text-xl leading-[25px] mt-[50px]">Downloaded Models</h3>
       <div className="py-5 w-[568px]">
         <SearchBar />
       </div>
       <ModelTable models={downloadedModels} />
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/web/app/_components/DownloadingModelTable/index.tsx b/web/app/_components/DownloadingModelTable/index.tsx
index 5ca6872f3..37c13baed 100644
--- a/web/app/_components/DownloadingModelTable/index.tsx
+++ b/web/app/_components/DownloadingModelTable/index.tsx
@@ -17,10 +17,12 @@ const DownloadingModelTable: React.FC = () => {
   }
 
   return (
-    <Fragment>
-      <h3 className="text-xl leading-[25px] mt-[50px] mb-4">Downloading Models</h3>
+    <div className="pl-[63px] pr-[89px]">
+      <h3 className="text-xl leading-[25px] mt-[50px] mb-4">
+        Downloading Models
+      </h3>
       <ModelDownloadingTable downloadStates={downloadStates} />
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/web/app/_components/HeaderTitle/index.tsx b/web/app/_components/HeaderTitle/index.tsx
index c61859791..8605ee9d6 100644
--- a/web/app/_components/HeaderTitle/index.tsx
+++ b/web/app/_components/HeaderTitle/index.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   title: string;
+  className?: string;
 };
 
-const HeaderTitle: React.FC<Props> = ({ title }) => (
-  <h2 className="my-5 font-semibold text-[34px] tracking-[-0.4px] leading-[41px]">
+const HeaderTitle: React.FC<Props> = ({ title, className }) => (
+  <h2
+    className={`my-5 font-semibold text-[34px] tracking-[-0.4px] leading-[41px] ${className}`}
+  >
     {title}
   </h2>
 );
diff --git a/web/app/_components/MyModelContainer/index.tsx b/web/app/_components/MyModelContainer/index.tsx
index 8e763144a..abc0b3c2d 100644
--- a/web/app/_components/MyModelContainer/index.tsx
+++ b/web/app/_components/MyModelContainer/index.tsx
@@ -4,11 +4,13 @@ import ActiveModelTable from "../ActiveModelTable";
 import DownloadingModelTable from "../DownloadingModelTable";
 
 const MyModelContainer: React.FC = () => (
-  <div className="flex flex-col w-full h-full pl-[63px] pr-[89px] pt-[60px]">
-    <HeaderTitle title="My Models" />
-    <ActiveModelTable />
-    <DownloadingModelTable />
-    <DownloadedModelTable />
+  <div className="flex flex-col w-full h-full pt-[60px]">
+    <HeaderTitle title="My Models" className="pl-[63px] pr-[89px]" />
+    <div className="pb-6 overflow-y-auto scroll">
+      <ActiveModelTable />
+      <DownloadingModelTable />
+      <DownloadedModelTable />
+    </div>
   </div>
 );