From 7799e0337b340397f53c4e0c9e8e17e3d1add88c Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Thu, 28 Dec 2023 12:21:46 +0530
Subject: [PATCH] Implement scrollable content in dashboard layout (#33)

---
 packages/frontend/src/layouts/Dashboard.tsx   |  4 +--
 .../frontend/src/layouts/ProjectSearch.tsx    | 32 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/layouts/Dashboard.tsx b/packages/frontend/src/layouts/Dashboard.tsx
index 056f5dcb..9f187a9c 100644
--- a/packages/frontend/src/layouts/Dashboard.tsx
+++ b/packages/frontend/src/layouts/Dashboard.tsx
@@ -9,8 +9,8 @@ const Dashboard = () => {
       <div className="h-full">
         <Sidebar />
       </div>
-      <div className="col-span-4 h-full p-3">
-        <div className="bg-white rounded-3xl h-full">
+      <div className="col-span-4 h-full p-3 overflow-y-hidden">
+        <div className="bg-white rounded-3xl h-full overflow-y-auto">
           <Outlet />
         </div>
       </div>
diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx
index 90772a8a..e4928263 100644
--- a/packages/frontend/src/layouts/ProjectSearch.tsx
+++ b/packages/frontend/src/layouts/ProjectSearch.tsx
@@ -8,22 +8,26 @@ import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 const ProjectSearch = () => {
   return (
     <div>
-      <div className="flex p-5">
-        <div className="grow mr-2">
-          <ProjectSearchBar onChange={() => {}} />
-        </div>
-        <IconButton color="blue" className="rounded-full mr-2">
-          <Typography variant="h5">+</Typography>
-        </IconButton>
-        <div className="mr-2 flex items-center">
-          <Typography>^</Typography>
-        </div>
-        <div className="px-2 py-1 bg-blue-gray-50 rounded-lg">
-          <Typography variant="lead">SY</Typography>
+      <div className="sticky top-0 bg-white z-30">
+        <div className="flex p-5">
+          <div className="grow mr-2">
+            <ProjectSearchBar onChange={() => {}} />
+          </div>
+          <IconButton color="blue" className="rounded-full mr-2">
+            <Typography variant="h5">+</Typography>
+          </IconButton>
+          <div className="mr-2 flex items-center">
+            <Typography>^</Typography>
+          </div>
+          <div className="px-2 py-1 bg-blue-gray-50 rounded-lg">
+            <Typography variant="lead">SY</Typography>
+          </div>
         </div>
+        <HorizontalLine />
+      </div>
+      <div className="z-0">
+        <Outlet />
       </div>
-      <HorizontalLine />
-      <Outlet />
     </div>
   );
 };