From ebad7f0cdf2e80a29cfe96fc8305693dfcfc8f4f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 22 Feb 2024 20:20:30 +0530
Subject: [PATCH] [WEB-515] fix: spreadsheet layout overflow (#3758)

* fix: spreadsheet column sort by dropdown overlapping fix

* fix: spreadsheet issue title column sticky fix

* fix: issues header z index fix
---
 web/components/headers/cycle-issues.tsx       | 11 +++++---
 web/components/headers/global-issues.tsx      |  2 +-
 web/components/headers/module-issues.tsx      | 27 +++++++++++++++----
 web/components/headers/project-issues.tsx     |  2 +-
 .../headers/project-view-issues.tsx           |  2 +-
 .../spreadsheet/columns/header-column.tsx     | 20 +++++++-------
 .../spreadsheet/spreadsheet-header.tsx        |  4 +--
 7 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 05030c500..0a36c133b 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -149,7 +149,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative z-10 w-full items-center gap-x-2 gap-y-4">
+      <div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
         <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
             <SidebarHamburgerToggle />
@@ -175,7 +175,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                         }
                       />
                     </span>
-                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                    <Link
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      className="block md:hidden pl-2 text-custom-text-300"
+                    >
+                      ...
+                    </Link>
                   </span>
                 }
               />
@@ -282,5 +287,3 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     </>
   );
 });
-
-
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index cca1a972b..3c40cbbff 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -107,7 +107,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="relative flex gap-2">
           <SidebarHamburgerToggle />
           <Breadcrumbs>
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index d51c0f432..f722b506f 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -152,7 +152,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative z-10 items-center gap-x-2 gap-y-4">
+      <div className="relative z-[15] items-center gap-x-2 gap-y-4">
         <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
             <SidebarHamburgerToggle />
@@ -178,7 +178,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                         }
                       />
                     </span>
-                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                    <Link
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      className="block md:hidden pl-2 text-custom-text-300"
+                    >
+                      ...
+                    </Link>
                   </span>
                 }
               />
@@ -249,7 +254,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
 
             {canUserCreateIssue && (
               <>
-                <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                <Button
+                  className="hidden md:block"
+                  onClick={() => setAnalyticsModal(true)}
+                  variant="neutral-primary"
+                  size="sm"
+                >
                   Analytics
                 </Button>
                 <Button
@@ -270,8 +280,15 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
               onClick={toggleSidebar}
             >
-              <ArrowRight className={`h-4 w-4 duration-300 hidden md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
-              <PanelRight className={cn("w-4 h-4 block md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+              <ArrowRight
+                className={`h-4 w-4 duration-300 hidden md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`}
+              />
+              <PanelRight
+                className={cn(
+                  "w-4 h-4 block md:hidden",
+                  !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
+                )}
+              />
             </button>
           </div>
         </div>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 033196758..43030c5c2 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -109,7 +109,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className=" relative z-10 items-center gap-x-2 gap-y-4">
+      <div className="relative z-[15] items-center gap-x-2 gap-y-4">
         <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
           <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
             <SidebarHamburgerToggle />
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 56cd54f0b..175534a79 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -108,7 +108,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
         <SidebarHamburgerToggle />
         <Breadcrumbs>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index b7f432385..ac06525df 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -65,15 +65,16 @@ export const HeaderColumn = (props: Props) => {
         </div>
       }
       onMenuClose={onClose}
-      placement="bottom-end"
+      placement="bottom-start"
       closeOnSelect
     >
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
         <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
-            ? "text-custom-text-100"
-            : "text-custom-text-200 hover:text-custom-text-100"
-            }`}
+          className={`flex items-center justify-between gap-1.5 px-1 ${
+            selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+              ? "text-custom-text-100"
+              : "text-custom-text-200 hover:text-custom-text-100"
+          }`}
         >
           <div className="flex items-center gap-2">
             <ArrowDownWideNarrow className="h-3 w-3 stroke-[1.5]" />
@@ -87,10 +88,11 @@ export const HeaderColumn = (props: Props) => {
       </CustomMenu.MenuItem>
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
         <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
-            ? "text-custom-text-100"
-            : "text-custom-text-200 hover:text-custom-text-100"
-            }`}
+          className={`flex items-center justify-between gap-1.5 px-1 ${
+            selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+              ? "text-custom-text-100"
+              : "text-custom-text-200 hover:text-custom-text-100"
+          }`}
         >
           <div className="flex items-center gap-2">
             <ArrowUpNarrowWide className="h-3 w-3 stroke-[1.5]" />
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 64d1ec0e1..8a4461cb5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -19,10 +19,10 @@ export const SpreadsheetHeader = (props: Props) => {
   const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled } = props;
 
   return (
-    <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-custom-border-100">
+    <thead className="sticky top-0 left-0 z-[2] border-b-[0.5px] border-custom-border-100">
       <tr>
         <th
-          className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
+          className="sticky left-0 z-[2] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
           tabIndex={-1}
         >
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">