From 44bc1993854b4bdd6674477e86820abdf71abadc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 29 Nov 2023 13:32:35 +0530
Subject: [PATCH] style: workspace sidebar scroll fix and improvement (#2934)

---
 web/components/workspace/sidebar-dropdown.tsx | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 69fe387c1..324d9acea 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -145,8 +145,10 @@ export const WorkspaceSidebarDropdown = observer(() => {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items className="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none">
-                <div className="flex flex-col items-start justify-start gap-3 p-3 max-h-96 overflow-y-scroll">
-                  <span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span>
+                <div className="flex flex-col items-start justify-start gap-3 px-3 max-h-96 overflow-y-scroll">
+                  <span className="sticky top-0 bg-custom-background-100 pt-3 z-10 w-full h-full text-sm font-medium text-custom-sidebar-text-200">
+                    Workspace
+                  </span>
                   {workspaces ? (
                     <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
                       {workspaces.length > 0 ? (
@@ -195,18 +197,20 @@ export const WorkspaceSidebarDropdown = observer(() => {
                       ) : (
                         <p>No workspace found!</p>
                       )}
-                      <Menu.Item
-                        as="button"
-                        type="button"
-                        onClick={() => {
-                          setTrackElement("APP_SIEDEBAR_WORKSPACE_DROPDOWN");
-                          router.push("/create-workspace");
-                        }}
-                        className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                      >
-                        <Plus className="h-4 w-4" />
-                        Create Workspace
-                      </Menu.Item>
+                      <div className="sticky bottom-0 bg-custom-background-100 z-10 w-full h-full">
+                        <Menu.Item
+                          as="button"
+                          type="button"
+                          onClick={() => {
+                            setTrackElement("APP_SIEDEBAR_WORKSPACE_DROPDOWN");
+                            router.push("/create-workspace");
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                        >
+                          <Plus className="h-4 w-4" />
+                          Create Workspace
+                        </Menu.Item>
+                      </div>
                     </div>
                   ) : (
                     <div className="w-full">