From 1a668c19a574942d3a9b2453016e6aaa62f03c2b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:27:19 +0530
Subject: [PATCH 1/2] style: issue detail page layout (#1424)

---
 .../[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 93bfecfe0..cb57ff9fd 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
+          <div className="w-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
+          <div className="w-1/3 space-y-5 border-l border-brand-base p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}

From 01f465fdfae20ed36d0b36ab6d5accf89763168e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:27:43 +0530
Subject: [PATCH 2/2] style: adjust tooltip position and spacing in workspace
 id and title in spreadsheet (#1420)

---
 .../core/board-view/single-issue.tsx           |  2 --
 .../core/spreadsheet-view/single-issue.tsx     | 18 ++++++++++++++----
 .../spreadsheet-view/spreadsheet-issues.tsx    |  4 ++++
 .../core/spreadsheet-view/spreadsheet-view.tsx |  1 +
 .../components/issues/view-select/assignee.tsx |  6 +++---
 .../components/issues/view-select/due-date.tsx |  8 +++++++-
 .../components/issues/view-select/estimate.tsx |  4 +++-
 .../components/issues/view-select/label.tsx    |  6 +++---
 .../components/issues/view-select/priority.tsx |  8 +++++++-
 .../components/issues/view-select/state.tsx    |  3 +++
 10 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index cde1b2e38..24a3e35a7 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/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
               />
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index 762de2453..22ffb0fb4 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/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}
           />
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
index c52cfa59a..1e05eba4e 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
+++ b/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}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index 15034a633..5b8ee0077 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/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}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 8bfa797fe..cba1db1e7 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/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
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index 163816a99..f5dcbc982 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/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
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
index 0f932405f..d330a5f58 100644
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/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"}
diff --git a/apps/app/components/issues/view-select/label.tsx b/apps/app/components/issues/view-select/label.tsx
index 33df5cf9f..53dca9382 100644
--- a/apps/app/components/issues/view-select/label.tsx
+++ b/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
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index 0afd2dd98..e7a674ec7 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/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",
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index 5ec0f71c7..4a9f585e2 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/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 &&