fix: spreadsheet view properties fix (#2599)

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

@@ -21,6 +21,7 @@ export interface IIssuePropertyAssignee {
   optionsClassName?: string;
   placement?: Placement;
   multiple?: true;
+  noLabelBorder?: boolean;
 }
 
 export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
@@ -36,6 +37,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     optionsClassName,
     placement,
     multiple = false,
+    noLabelBorder = false,
   } = props;
 
   const { workspace: workspaceStore, project: projectStore } = useMobxStore();
@@ -91,8 +93,9 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           </AvatarGroup>
         ) : (
           <span
-            className="flex items-center justify-between gap-1 h-full 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 h-full w-full text-xs rounded duration-300 focus:outline-none ${
-          "
+              noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
+            }}`}
           >
             <User2 className="h-3 w-3" />
           </span>

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

@@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
   optionsClassName?: string;
   placement?: Placement;
   maxRender?: number;
+  noLabelBorder?: boolean;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -40,6 +41,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     optionsClassName,
     placement,
     maxRender = 2,
+    noLabelBorder = false,
   } = props;
 
   const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
@@ -149,7 +151,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 </div>
               )
             ) : (
-              <div className="h-full flex items-center justify-center text-xs rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 hover:bg-custom-background-80">
+              <div
+                className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+                  noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+                }`}
+              >
                 Select labels
               </div>
             )}

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

@@ -35,9 +35,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
     onChange,
     disabled,
     hideDropdownArrow = false,
-    className,
+    className = "",
-    buttonClassName,
+    buttonClassName = "",
-    optionsClassName,
+    optionsClassName = "",
     placement,
   } = props;
 
@@ -110,7 +110,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
             <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}`}
               onClick={() => fetchProjectStates()}

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

@@ -26,7 +26,9 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
         projectId={issue.project_detail.id ?? null}
         value={issue.assignees}
         onChange={(data) => onChange({ assignees: data })}
-        buttonClassName="!p-0 !rounded-none !border-0"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
         hideDropdownArrow
         disabled={disabled}
         multiple

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

@@ -19,7 +19,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
 
   return (
     <>
-      <div className="text-xs">{renderLongDetailDateFormat(issue.created_at)}</div>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.created_at)}
+      </div>
 
       {isExpanded &&
         !isLoading &&

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

@@ -24,6 +24,8 @@ 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"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />

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

@@ -25,6 +25,8 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.estimate_point}
         onChange={(data) => onChange({ estimate_point: data })}
+        className="h-full w-full"
+        buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
         hideDropdownArrow
         disabled={disabled}
       />

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

@@ -28,8 +28,9 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.labels}
         onChange={(data) => onChange({ labels: data })}
-        className="h-full"
+        className="h-full w-full"
-        buttonClassName="!border-0 !h-full !w-full !rounded-none"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}

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

@@ -24,8 +24,8 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
       <PrioritySelect
         value={issue.priority}
         onChange={(data) => onChange({ priority: data })}
-        className="h-full"
+        className="h-full w-full"
-        buttonClassName="!border-0 !h-full !w-full !rounded-none px-4"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
         showTitle
         highlightUrgentPriority={false}
         hideDropdownArrow

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

@@ -24,6 +24,8 @@ 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"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />

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

@@ -28,7 +28,8 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        buttonClassName="!shadow-none !border-0"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full"
         hideDropdownArrow
         disabled={disabled}
       />

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

@@ -21,7 +21,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="text-xs">{renderLongDetailDateFormat(issue.updated_at)}</div>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.updated_at)}
+      </div>
 
       {isExpanded &&
         !isLoading &&

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

@@ -12,6 +12,8 @@ type Props = {
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -22,6 +24,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
@@ -35,7 +39,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
       position={tooltipPosition}
     >
       <div
-        className={`group flex-shrink-0 relative max-w-[6.5rem] ${
+        className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
@@ -47,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           placeholder="Due date"
           value={issue?.target_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
           minDate={minDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}

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

@@ -12,6 +12,8 @@ type Props = {
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -22,6 +24,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
@@ -34,12 +38,12 @@ 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]">
+      <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"}`}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}