From 074e35525c2b77c091d6eace16071a13dc9758ae Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Thu, 7 Dec 2023 11:59:46 +0530
Subject: [PATCH] fix: spreadsheet layout bugs (#3016)

* fix: date picker z visibility

* fix: typo in empty issue screen

* fix: spread sheet column rightmost border
---
 web/components/issues/issue-layouts/empty-states/project.tsx    | 2 +-
 .../issues/issue-layouts/spreadsheet/spreadsheet-column.tsx     | 2 +-
 .../issues/issue-layouts/spreadsheet/spreadsheet-view.tsx       | 1 +
 web/components/issues/view-select/due-date.tsx                  | 2 +-
 web/components/issues/view-select/start-date.tsx                | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/components/issues/issue-layouts/empty-states/project.tsx b/web/components/issues/issue-layouts/empty-states/project.tsx
index 4c6700b02..85a0b36c0 100644
--- a/web/components/issues/issue-layouts/empty-states/project.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project.tsx
@@ -18,7 +18,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
     <div className="h-full w-full grid place-items-center">
       <NewEmptyState
         title="Create an issue and assign it to someone, even yourself"
-        description="Think of issues as jobs, tasks, work, or JTBD. Which we like.An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal."
+        description="Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal."
         image={emptyIssue}
         comicBox={{
           title: "Issues are building blocks in Plane.",
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index 0f7a138d4..ca093eb73 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -77,7 +77,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
   const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
 
   return (
-    <div className="relative flex flex-col h-max w-full max-w-max bg-custom-background-100">
+    <div className="flex flex-col h-max w-full max-w-max bg-custom-background-100">
       <div className="flex items-center min-w-[8rem] px-4 py-1 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
         <CustomMenu
           customButtonClassName="!w-full"
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index a6115f354..5a29ed91b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -139,6 +139,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
               <Spinner />
             </div>
           )}
+          <div /> {/* empty div to show right most border */}
         </div>
 
         <div className="border-t border-custom-border-100">
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index 9e409e80b..216279dad 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -47,7 +47,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
       position={tooltipPosition}
     >
       <div
-        className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
+        className={`group flex-shrink-0 max-w-[6.5rem] ${className} ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index f4688be9b..2f1d27c46 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -40,7 +40,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
       tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
-      <div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
+      <div className={`group flex-shrink-0 max-w-[6.5rem] ${className}`}>
         <CustomDatePicker
           value={issue?.start_date}
           onChange={onChange}