From c96fbd37248234fc40fbf8a9ce7b2089c29ca7d9 Mon Sep 17 00:00:00 2001
From: piyushchhabra <maniisback@rediffmail.com>
Date: Thu, 25 May 2023 19:36:26 +0530
Subject: [PATCH] fix(ui): fixing scroll on project list selection

---
 frontend/src/components/v2/Select/Select.tsx | 10 +++++---
 frontend/src/layouts/AppLayout/AppLayout.tsx | 26 ++++++++++----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 46cd3fb03..17e606050 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCaretDown, faCheck, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faCaretDown, faCaretUp,faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { twMerge } from 'tailwind-merge';
@@ -63,7 +63,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             style={{ width: 'var(--radix-select-trigger-width)' }}
           >
             <SelectPrimitive.ScrollUpButton>
-              <FontAwesomeIcon icon={faChevronUp} size="sm" />
+              <div className="flex items-center justify-center">
+                <FontAwesomeIcon icon={faCaretUp} size="sm" />
+              </div>
             </SelectPrimitive.ScrollUpButton>
             <SelectPrimitive.Viewport className="p-1">
               {isLoading ? (
@@ -76,7 +78,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
               )}
             </SelectPrimitive.Viewport>
             <SelectPrimitive.ScrollDownButton>
-              <FontAwesomeIcon icon={faCaretDown} size="xs" />
+              <div className="flex items-center justify-center">
+                <FontAwesomeIcon icon={faCaretDown} size="sm" />
+              </div>
             </SelectPrimitive.ScrollDownButton>
           </SelectPrimitive.Content>
         </SelectPrimitive.Portal>
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 791e3e385..7d495c9df 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -261,20 +261,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         router.push(`/dashboard/${value}`);
                       }}
                       position="popper"
-                      dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50"
+                      dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 overflow-y-scroll max-h-96 no-scrollbar border-gray-700"
                     >
-                      {workspaces
-                        .filter((ws) => ws.organization === currentOrg?._id)
-                        .map(({ _id, name }) => (
-                          <SelectItem
-                            key={`ws-layout-list-${_id}`}
-                            value={_id}
-                            className={`${currentWorkspace?._id === _id && 'bg-mineshaft-600'}`}
-                          >
-                            {name}
-                          </SelectItem>
-                        ))}
-                      {/* <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" /> */}
                       <div className="w-full">
                         <Button
                           className="w-full bg-mineshaft-700 py-2 text-bunker-200"
@@ -292,7 +280,19 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         >
                           Add Project
                         </Button>
+                        <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
                       </div>
+                      {workspaces
+                        .filter((ws) => ws.organization === currentOrg?._id)
+                        .map(({ _id, name }) => (
+                          <SelectItem
+                            key={`ws-layout-list-${_id}`}
+                            value={_id}
+                            className={`${currentWorkspace?._id === _id && 'bg-mineshaft-600'}`}
+                          >
+                            {name}
+                          </SelectItem>
+                        ))}
                     </Select>
                   </div>
                 ) : (