From f3b7fc6eb5af867c54bfde316b7433b8180450e6 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 23 Mar 2023 23:25:08 +0530
Subject: [PATCH] fix: filters dropdown overflowing issue (#513)

* fix: filters dropdown overflowing issue

* filters dropdown z-index
---
 .../core/board-view/single-issue.tsx           |  4 ++--
 .../app/components/core/issues-view-filter.tsx |  1 +
 .../app/components/ui/multi-level-dropdown.tsx | 18 +++++++++++++++---
 apps/app/components/views/select-filters.tsx   |  9 ++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 01623b41e..4df5ad35c 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -189,7 +189,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
         isOpen={contextMenu}
         setIsOpen={setContextMenu}
       >
-        {!isNotAllowed &&(
+        {!isNotAllowed && (
           <>
             <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
               Edit issue
@@ -222,7 +222,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
       >
         <div className="group/card relative select-none p-3.5">
           {!isNotAllowed && (
-            <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
+            <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
               {type && !isNotAllowed && (
                 <CustomMenu width="auto" ellipsis>
                   <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index a3a5621c7..0bf5d21e5 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -83,6 +83,7 @@ export const IssuesFilterView: React.FC = () => {
           );
         }}
         direction="left"
+        height="rg"
       />
       <Popover className="relative">
         {({ open }) => (
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index fac674d14..1ce14a802 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -22,6 +22,7 @@ type MultiLevelDropdownProps = {
   }[];
   onSelect: (value: any) => void;
   direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
 };
 
 export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
@@ -29,6 +30,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   options,
   onSelect,
   direction = "right",
+  height = "md",
 }) => {
   const [openChildFor, setOpenChildFor] = useState<string | null>(null);
 
@@ -58,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           >
             <Menu.Items
               static
-              className="absolute right-0 mt-1 w-36 origin-top-right select-none rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
               {options.map((option) => (
                 <div className="relative p-1" key={option.id}>
@@ -100,10 +102,20 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                   {option.children && option.id === openChildFor && (
                     <Menu.Items
                       static
-                      className={`absolute top-0 w-36 origin-top-right select-none rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
                         direction === "left"
                           ? "right-full -translate-x-1"
                           : "left-full translate-x-1"
+                      } ${
+                        height === "sm"
+                          ? "max-h-28"
+                          : height === "md"
+                          ? "max-h-44"
+                          : height === "rg"
+                          ? "max-h-56"
+                          : height === "lg"
+                          ? "max-h-80"
+                          : ""
                       }`}
                     >
                       <div className="space-y-1 p-1">
@@ -118,7 +130,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                             className={({ active }) =>
                               `${
                                 active || child.selected ? "bg-gray-100" : "text-gray-900"
-                              } flex w-full items-center rounded px-1 py-1.5 capitalize`
+                              } flex w-full items-center break-all rounded px-1 py-1.5 capitalize`
                             }
                           >
                             {child.label}
diff --git a/apps/app/components/views/select-filters.tsx b/apps/app/components/views/select-filters.tsx
index 496147be1..297be737f 100644
--- a/apps/app/components/views/select-filters.tsx
+++ b/apps/app/components/views/select-filters.tsx
@@ -22,9 +22,15 @@ type Props = {
   filters: IIssueFilterOptions | IQuery;
   onSelect: (option: any) => void;
   direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
 };
 
-export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction = "right" }) => {
+export const SelectFilters: React.FC<Props> = ({
+  filters,
+  onSelect,
+  direction = "right",
+  height = "md",
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -48,6 +54,7 @@ export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction =
       label="Filters"
       onSelect={onSelect}
       direction={direction}
+      height={height}
       options={[
         {
           id: "priority",