chore: spreadsheet layout improvement (#2677)

* style: spreadsheet column width fix

* style: spreadsheet label column styling

* chore: spreadsheet layout issue properties improvement

* fix: build error

web/components/issues/issue-layouts/properties/estimates.tsx

@@ -110,7 +110,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
         >

web/components/issues/issue-layouts/properties/labels.tsx

@@ -37,8 +37,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     disabled,
     hideDropdownArrow = false,
     className,
-    buttonClassName,
+    buttonClassName = "",
-    optionsClassName,
+    optionsClassName = "",
     placement,
     maxRender = 2,
     noLabelBorder = false,
@@ -93,7 +93,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   });
 
   const label = (
-    <div className="flex items-center gap-2 text-custom-text-200 h-full">
+    <div className="flex items-center gap-2 text-custom-text-200">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>

web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx

@@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex items-center justify-center text-xs h-full w-full">
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
         {issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
       </div>
 

web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx

@@ -24,8 +24,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
       <ViewDueDateSelect
         issue={issue}
         onChange={(val) => onChange({ target_date: val })}
-        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
-        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />

web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -29,7 +29,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         value={issue.labels}
         onChange={(data) => onChange({ labels: data })}
         className="h-full w-full"
-        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        buttonClassName="px-2.5 h-full"
         noLabelBorder
         hideDropdownArrow
         maxRender={1}

web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx

@@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex items-center justify-center text-xs h-full w-full">
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
         {issue.link_count} {issue.link_count === 1 ? "link" : "links"}
       </div>
 

web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx

@@ -24,8 +24,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
       <ViewStartDateSelect
         issue={issue}
         onChange={(val) => onChange({ start_date: val })}
-        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
-        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />

web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -18,7 +18,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex items-center justify-center text-xs h-full w-full">
+      <div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
         {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
       </div>
 

web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx

@@ -84,7 +84,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 bg-custom-background-100">
+    <div className="relative 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"

web/components/issues/view-select/due-date.tsx

@@ -1,8 +1,14 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
+import { CalendarDays } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import {
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortDateWithYearFormat,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -13,7 +19,6 @@ type Props = {
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   className?: string;
-  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -25,13 +30,16 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   handleOnClose,
   tooltipPosition = "top",
   className = "",
-  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
+  const today = new Date();
+  const endDate = new Date(issue.target_date ?? "");
+  const areYearsEqual = endDate.getFullYear() === today.getFullYear();
+
   return (
     <Tooltip
       tooltipHeading="Due date"
@@ -48,10 +56,32 @@ export const ViewDueDateSelect: React.FC<Props> = ({
         }`}
       >
         <CustomDatePicker
-          placeholder="Due date"
           value={issue?.target_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
+          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          customInput={
+            <div
+              className={`flex items-center justify-center gap-2 px-2 py-1 text-xs cursor-pointer rounded border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80 ${
+                issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
+              }`}
+            >
+              {issue.target_date ? (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>
+                    {areYearsEqual
+                      ? renderShortDate(issue.target_date ?? "", "_ _")
+                      : renderShortMonthDate(issue.target_date ?? "", "_ _")}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>Due Date</span>
+                </>
+              )}
+            </div>
+          }
           minDate={minDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}

web/components/issues/view-select/start-date.tsx

@@ -1,8 +1,9 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
+import { CalendarDays } from "lucide-react";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -13,7 +14,6 @@ type Props = {
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   className?: string;
-  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -25,12 +25,14 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   handleOnClose,
   tooltipPosition = "top",
   className = "",
-  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
+  const today = new Date();
+  const startDate = new Date(issue.start_date ?? "");
+  const areYearsEqual = startDate.getFullYear() === today.getFullYear();
 
   return (
     <Tooltip
@@ -40,13 +42,34 @@ export const ViewStartDateSelect: React.FC<Props> = ({
     >
       <div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
         <CustomDatePicker
-          placeholder="Start date"
           value={issue?.start_date}
           onChange={onChange}
-          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
+          customInput={
+            <div
+              className={`flex items-center justify-center gap-2 px-2 py-1 text-xs cursor-pointer rounded border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80 ${
+                issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
+              }`}
+            >
+              {issue?.start_date ? (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>
+                    {areYearsEqual
+                      ? renderShortDate(issue?.start_date, "_ _")
+                      : renderShortMonthDate(issue?.start_date, "_ _")}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>Start Date</span>
+                </>
+              )}
+            </div>
+          }
           handleOnClose={handleOnClose}
           disabled={disabled}
         />

web/components/ui/datepicker.tsx

@@ -10,6 +10,7 @@ type Props = {
   onChange: (val: string | null) => void;
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
+  customInput?: React.ReactNode;
   placeholder?: string;
   displayShortForm?: boolean;
   error?: boolean;
@@ -35,6 +36,7 @@ export const CustomDatePicker: React.FC<Props> = ({
   className = "",
   isClearable = true,
   disabled = false,
+  customInput,
   maxDate,
   minDate,
 }) => (
@@ -48,6 +50,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     onCalendarOpen={handleOnOpen}
     onCalendarClose={handleOnClose}
     wrapperClassName={wrapperClassName}
+    customInput={customInput}
     className={`${
       renderAs === "input"
         ? "block px-2 py-2 text-sm focus:outline-none"