From a44cddb0fc7b1ae2672fa66722ce048b43445c1d Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:08:28 +0530
Subject: [PATCH] dev: dropdown overflow issue resolved in kanban (#1106)

---
 apps/app/components/core/board-view/single-board.tsx | 2 +-
 apps/app/components/issues/view-select/assignee.tsx  | 2 ++
 apps/app/components/ui/custom-search-select.tsx      | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index a4f869cb32..16fe0e887b 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3 overflow-y-auto">
+              <div className="pt-3 overflow-hidden overflow-y-scroll">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 48149c24f8..71e16a0922 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -122,6 +122,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       noChevron
       position={position}
       disabled={isNotAllowed}
+      selfPositioned={selfPositioned}
+      dropdownWidth="w-full min-w-[8rem]"
     />
   );
 };
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ef09433772..fb1c0a88c6 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
   selfPositioned?: boolean;
   multiple?: boolean;
   footerOption?: JSX.Element;
+  dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
   label,
@@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
   selfPositioned = false,
   multiple = false,
   footerOption,
+  dropdownWidth,
 }: CustomSearchSelectProps) => {
   const [query, setQuery] = useState("");
 
@@ -108,7 +110,9 @@ export const CustomSearchSelect = ({
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+                dropdownWidth ? dropdownWidth : ``
+              } `}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />