style: adjust tooltip position and spacing in workspace id and title in spreadsheet (#1420)

apps/app/components/core/board-view/single-issue.tsx

@@ -368,7 +368,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 isNotAllowed={isNotAllowed}
-                tooltipPosition="left"
                 user={user}
                 selfPositioned
               />
@@ -378,7 +377,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 isNotAllowed={isNotAllowed}
-                tooltipPosition="left"
                 user={user}
                 selfPositioned
               />

apps/app/components/core/spreadsheet-view/single-issue.tsx

@@ -43,6 +43,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 
 type Props = {
   issue: IIssue;
+  index: number;
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
   properties: Properties;
@@ -57,6 +58,7 @@ type Props = {
 
 export const SingleSpreadsheetIssue: React.FC<Props> = ({
   issue,
+  index,
   expanded,
   handleToggleExpand,
   properties,
@@ -165,6 +167,8 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   const paddingLeft = `${nestingLevel * 68}px`;
 
+  const tooltipPosition = index === 0 ? "bottom" : "top";
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -241,16 +245,16 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             )}
           </div>
 
-          <div className="h-6 w-6 flex justify-center items-center">
+          {issue.sub_issues_count > 0 && (
-            {issue.sub_issues_count > 0 && (
+            <div className="h-6 w-6 flex justify-center items-center">
               <button
                 className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
                 onClick={() => handleToggleExpand(issue.id)}
               >
                 <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
               </button>
-            )}
+            </div>
-          </div>
+          )}
         </div>
 
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
@@ -265,6 +269,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -277,6 +282,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             noBorder
             user={user}
             isNotAllowed={isNotAllowed}
@@ -289,6 +295,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -301,6 +308,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -313,6 +321,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
+            tooltipPosition={tooltipPosition}
             noBorder
             user={user}
             isNotAllowed={isNotAllowed}
@@ -325,6 +334,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             user={user}
             isNotAllowed={isNotAllowed}
           />

apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx

@@ -10,6 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
 type Props = {
   key: string;
   issue: IIssue;
+  index: number;
   expandedIssues: string[];
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
   properties: Properties;
@@ -24,6 +25,7 @@ type Props = {
 
 export const SpreadsheetIssues: React.FC<Props> = ({
   key,
+  index,
   issue,
   expandedIssues,
   setExpandedIssues,
@@ -57,6 +59,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
     <div>
       <SingleSpreadsheetIssue
         issue={issue}
+        index={index}
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}
         gridTemplateColumns={gridTemplateColumns}
@@ -77,6 +80,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
           <SpreadsheetIssues
             key={subIssue.id}
             issue={subIssue}
+            index={index}
             expandedIssues={expandedIssues}
             setExpandedIssues={setExpandedIssues}
             gridTemplateColumns={gridTemplateColumns}

apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx

@@ -70,6 +70,7 @@ export const SpreadsheetView: React.FC<Props> = ({
           {spreadsheetIssues.map((issue: IIssue, index) => (
             <SpreadsheetIssues
               key={`${issue.id}_${index}`}
+              index={index}
               issue={issue}
               expandedIssues={expandedIssues}
               setExpandedIssues={setExpandedIssues}

apps/app/components/issues/view-select/assignee.tsx

@@ -20,8 +20,8 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
-  tooltipPosition?: "left" | "right";
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -32,7 +32,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
   partialUpdateIssue,
   position = "left",
   selfPositioned = false,
-  tooltipPosition = "right",
+  tooltipPosition = "top",
   user,
   isNotAllowed,
   customButton = false,
@@ -69,7 +69,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
   const assigneeLabel = (
     <Tooltip
-      position={`top-${tooltipPosition}`}
+      position={tooltipPosition}
       tooltipHeading="Assignees"
       tooltipContent={
         issue.assignee_details.length > 0

apps/app/components/issues/view-select/due-date.tsx

@@ -12,6 +12,7 @@ import { ICurrentUserResponse, IIssue } from "types";
 type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -20,6 +21,7 @@ type Props = {
 export const ViewDueDateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
+  tooltipPosition = "top",
   noBorder = false,
   user,
   isNotAllowed,
@@ -28,7 +30,11 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   const { workspaceSlug } = router.query;
 
   return (
-    <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
+    <Tooltip
+      tooltipHeading="Due Date"
+      tooltipContent={issue.target_date ?? "N/A"}
+      position={tooltipPosition}
+    >
       <div
         className={`group relative max-w-[6.5rem] ${
           issue.target_date === null

apps/app/components/issues/view-select/estimate.tsx

@@ -17,6 +17,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -27,6 +28,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   customButton = false,
   user,
@@ -40,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
 
   const estimateLabels = (
-    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
+    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
       <div className="flex items-center gap-1 text-brand-secondary">
         <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
         {estimateValue ?? "None"}

apps/app/components/issues/view-select/label.tsx

@@ -22,7 +22,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
-  tooltipPosition?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -33,7 +33,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
   partialUpdateIssue,
   position = "left",
   selfPositioned = false,
-  tooltipPosition = "right",
+  tooltipPosition = "top",
   user,
   isNotAllowed,
   customButton = false,
@@ -68,7 +68,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
 
   const labelsLabel = (
     <Tooltip
-      position={`top-${tooltipPosition}`}
+      position={tooltipPosition}
       tooltipHeading="Labels"
       tooltipContent={
         issue.label_details.length > 0

apps/app/components/issues/view-select/priority.tsx

@@ -19,6 +19,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -29,6 +30,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   noBorder = false,
   user,
@@ -75,7 +77,11 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               : "border-brand-base"
           } items-center`}
         >
-          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+          <Tooltip
+            tooltipHeading="Priority"
+            tooltipContent={issue.priority ?? "None"}
+            position={tooltipPosition}
+          >
             <span className="flex gap-1 items-center text-brand-secondary text-xs">
               {getPriorityIcon(
                 issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",

apps/app/components/issues/view-select/state.tsx

@@ -21,6 +21,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -31,6 +32,7 @@ export const ViewStateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   customButton = false,
   user,
@@ -64,6 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
     <Tooltip
       tooltipHeading="State"
       tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+      position={tooltipPosition}
     >
       <div className="flex items-center cursor-pointer gap-2 text-brand-secondary">
         {selectedOption &&