From ba2d388581a36dde327e09a01ec55e7c0e1e2a6d Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 14:53:28 +0530
Subject: [PATCH 1/5] changes for list and kanban

---
 web/core/components/dropdowns/date.tsx                  | 5 ++++-
 web/core/components/dropdowns/member/index.tsx          | 1 +
 web/core/components/dropdowns/member/member-options.tsx | 7 +++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 1977d066205..e087906cc81 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -156,7 +156,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
         createPortal(
           <Combobox.Options data-prevent-outside-click static>
             <div
-              className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20"
+              className={cn(
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
+                className
+              )}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
diff --git a/web/core/components/dropdowns/member/index.tsx b/web/core/components/dropdowns/member/index.tsx
index 64dc566353f..956d505533b 100644
--- a/web/core/components/dropdowns/member/index.tsx
+++ b/web/core/components/dropdowns/member/index.tsx
@@ -153,6 +153,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
       </Combobox.Button>
       {isOpen && (
         <MemberOptions
+          className={className}
           isOpen={isOpen}
           projectId={projectId}
           placement={placement}
diff --git a/web/core/components/dropdowns/member/member-options.tsx b/web/core/components/dropdowns/member/member-options.tsx
index 8e7003f24a2..ed5cdc05368 100644
--- a/web/core/components/dropdowns/member/member-options.tsx
+++ b/web/core/components/dropdowns/member/member-options.tsx
@@ -9,11 +9,13 @@ import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 //components
+import { cn } from "@plane/editor";
 import { Avatar } from "@plane/ui";
 //store
 import { useUser, useMember } from "@/hooks/store";
 
 interface Props {
+  className? : string;
   projectId?: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
@@ -21,7 +23,7 @@ interface Props {
 }
 
 export const MemberOptions = observer((props: Props) => {
-  const { projectId, referenceElement, placement, isOpen } = props;
+  const { projectId, referenceElement, placement, isOpen, className="" } = props;
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -88,7 +90,8 @@ export const MemberOptions = observer((props: Props) => {
   return createPortal(
     <Combobox.Options data-prevent-outside-click static>
       <div
-        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20"
+        className={cn("my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20",
+          className)}
         ref={setPopperElement}
         style={{
           ...styles.popper,

From 4dca80fd92f0879df913c17cd9fd7993d6fba647 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 14:54:41 +0530
Subject: [PATCH 2/5] passing values for list and kanban

---
 .../issues/issue-layouts/properties/all-properties.tsx         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index baa7dfc09a1..64306e3331e 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -328,6 +328,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             disabled={isReadOnly}
+            className="z-10"
             showTooltip
           />
         </div>
@@ -346,6 +347,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
             disabled={isReadOnly}
+            className="z-10"
             showTooltip
           />
         </div>
@@ -364,6 +366,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
             showTooltip={issue?.assignee_ids?.length === 0}
             placeholder="Assignees"
+            className="z-10"
             tooltipContent=""
           />
         </div>

From 68f3445db851254661d730b31cf1520348ca953f Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 14:55:24 +0530
Subject: [PATCH 3/5] spreadsheet changes

---
 .../issues/issue-layouts/spreadsheet/columns/assignee-column.tsx | 1 +
 .../issues/issue-layouts/spreadsheet/columns/due-date-column.tsx | 1 +
 .../issue-layouts/spreadsheet/columns/start-date-column.tsx      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index cf71f2436d9..bc2866f5499 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -38,6 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
         buttonContainerClassName="w-full"
+        className="z-9"
         onClose={onClose}
       />
     </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index f0c43a4573b..6a554853cf6 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -53,6 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
+        className="z-9"
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 9a17d34d4d2..105feb7ddcc 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -40,6 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
         buttonContainerClassName="w-full"
+        className="z-9"
         onClose={onClose}
       />
     </div>

From 0d3d05ac1955dec75a7433743cfe240ca72daf05 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Thu, 12 Sep 2024 18:02:28 +0530
Subject: [PATCH 4/5] fix use different props for different stylings

---
 web/core/components/dropdowns/date.tsx                       | 4 +++-
 web/core/components/dropdowns/member/index.tsx               | 4 +++-
 web/core/components/dropdowns/member/member-options.tsx      | 5 +++--
 .../issues/issue-layouts/properties/all-properties.tsx       | 2 +-
 .../issue-layouts/spreadsheet/columns/assignee-column.tsx    | 2 +-
 .../issue-layouts/spreadsheet/columns/due-date-column.tsx    | 2 +-
 .../issue-layouts/spreadsheet/columns/start-date-column.tsx  | 2 +-
 7 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 9dba53ef443..db2dfa17eba 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -20,6 +20,7 @@ import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
+  optionsClassName?: string;
   icon?: React.ReactNode;
   isClearable?: boolean;
   minDate?: Date;
@@ -39,6 +40,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
     buttonVariant,
     className = "",
     clearIconClassName = "",
+    optionsClassName = "",
     closeOnSelect = true,
     disabled = false,
     hideIcon = false,
@@ -163,7 +165,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <div
               className={cn(
                 "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
-                className
+                optionsClassName
               )}
               ref={setPopperElement}
               style={styles.popper}
diff --git a/web/core/components/dropdowns/member/index.tsx b/web/core/components/dropdowns/member/index.tsx
index 4d068e42399..9ea23fc3712 100644
--- a/web/core/components/dropdowns/member/index.tsx
+++ b/web/core/components/dropdowns/member/index.tsx
@@ -22,6 +22,7 @@ type Props = {
   icon?: LucideIcon;
   onClose?: () => void;
   renderByDefault?: boolean;
+  optionsClassName? : string;
 } & MemberDropdownProps;
 
 export const MemberDropdown: React.FC<Props> = observer((props) => {
@@ -34,6 +35,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     disabled = false,
     dropdownArrow = false,
     dropdownArrowClassName = "",
+    optionsClassName = "",
     hideIcon = false,
     multiple,
     onChange,
@@ -160,7 +162,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     >
       {isOpen && (
         <MemberOptions
-          className={className}
+          optionsClassName={optionsClassName}
           isOpen={isOpen}
           projectId={projectId}
           placement={placement}
diff --git a/web/core/components/dropdowns/member/member-options.tsx b/web/core/components/dropdowns/member/member-options.tsx
index 380e672be72..bf14e14a641 100644
--- a/web/core/components/dropdowns/member/member-options.tsx
+++ b/web/core/components/dropdowns/member/member-options.tsx
@@ -17,6 +17,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface Props {
   className? : string;
+  optionsClassName?: string;
   projectId?: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
@@ -24,7 +25,7 @@ interface Props {
 }
 
 export const MemberOptions = observer((props: Props) => {
-  const { projectId, referenceElement, placement, isOpen, className="" } = props;
+  const { projectId, referenceElement, placement, isOpen, optionsClassName="" } = props;
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -95,7 +96,7 @@ export const MemberOptions = observer((props: Props) => {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn("my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20",
-          className)}
+          optionsClassName)}
         ref={setPopperElement}
         style={{
           ...styles.popper,
diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 6638036ceb4..63a951618cf 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -371,7 +371,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
             showTooltip={issue?.assignee_ids?.length === 0}
             placeholder="Assignees"
-            className="z-10"
+            optionsClassName="z-10"
             tooltipContent=""
             renderByDefault={isMobile}
           />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 5d565dd859b..a73b19cbd18 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -38,7 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        className="z-9"
+        optionsClassName="z-9"
         onClose={onClose}
       />
     </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 3eaa321aae4..915dc8b6208 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -53,7 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
-        className="z-9"
+        optionsClassName="z-[9px]"
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 46bc617fc97..1b0c4bd2322 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -40,7 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        className="z-9"
+        optionsClassName="z-[9px]"
         onClose={onClose}
       />
     </div>

From 1ebfb3c1d04ce3b55cce2dd71ef1a5adecc55d8a Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Thu, 12 Sep 2024 20:04:49 +0530
Subject: [PATCH 5/5] fix z index

---
 .../issues/issue-layouts/properties/all-properties.tsx      | 6 ++----
 .../issue-layouts/spreadsheet/columns/assignee-column.tsx   | 2 +-
 .../issue-layouts/spreadsheet/columns/due-date-column.tsx   | 2 +-
 .../issue-layouts/spreadsheet/columns/start-date-column.tsx | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 4785c86b9e6..e439635feeb 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -330,9 +330,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             placeholder="Start date"
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
-            className="z-10"
+            optionsClassName="z-10"
             disabled={isReadOnly}
-            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -351,9 +350,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
-            className="z-10"
+            optionsClassName="z-10"
             disabled={isReadOnly}
-            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index b154828ff8d..e6e54fcc343 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -38,7 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        optionsClassName="z-[9px]"
+        optionsClassName="z-[9]"
         onClose={onClose}
       />
     </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 915dc8b6208..57858ff7543 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -53,7 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
-        optionsClassName="z-[9px]"
+        optionsClassName="z-[9]"
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 1b0c4bd2322..a20c2472204 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -40,7 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        optionsClassName="z-[9px]"
+        optionsClassName="z-[9]"
         onClose={onClose}
       />
     </div>