From c1f8766571294eef77085f9b57be380c4bacc263 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 23:10:04 +0530
Subject: [PATCH 1/5] styles: UI changes in the gantt blocks

---
 .../components/cycles/cycles-list-gantt-chart.tsx    |  6 +++---
 apps/app/components/cycles/gantt-chart.tsx           |  6 +++---
 apps/app/components/gantt-chart/blocks/index.tsx     | 12 +++++-------
 apps/app/components/gantt-chart/chart/index.tsx      |  2 +-
 apps/app/components/gantt-chart/views/month-view.ts  |  2 +-
 apps/app/components/issues/gantt-chart.tsx           |  6 +++---
 apps/app/components/modules/gantt-chart.tsx          |  6 +++---
 .../components/modules/modules-list-gantt-chart.tsx  |  6 +++---
 apps/app/components/views/gantt-chart.tsx            |  6 +++---
 9 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 2b783f4e2..ad298e79d 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -23,9 +23,9 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
-      <div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index d38ad727b..04de7afb7 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 24ee4d39e..113ca8964 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -21,14 +21,14 @@ export const GanttChartBlocks: FC<{
       className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <div className="w-full divide-y divide-brand-base">
+      <div className="w-full">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
             <>
               {block.start_date && block.target_date && (
                 <ChartDraggable
-                  className="relative flex h-[36.5px] items-center"
+                  className="relative flex h-[40px] items-center"
                   key={`blocks-${_idx}`}
                   block={block}
                   handleBlock={handleChartBlockPosition}
@@ -44,14 +44,12 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
+                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
                     >
-                      <div className="w-full h-full relative overflow-hidden">
-                        {blockRender({ ...block?.data })}
-                      </div>
+                      {blockRender({ ...block?.data })}
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
@@ -71,7 +69,7 @@ export const GanttChartBlocks: FC<{
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index a1b80ef84..6724c3552 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -214,7 +214,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none`}
+      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
     >
       {/* chart title */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/apps/app/components/gantt-chart/views/month-view.ts
index df537ba5e..7211a45eb 100644
--- a/apps/app/components/gantt-chart/views/month-view.ts
+++ b/apps/app/components/gantt-chart/views/month-view.ts
@@ -184,7 +184,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
   diffMonths -= startDate.getMonth();
   diffMonths += itemStartDate.getMonth();
 
-  scrollPosition = scrollPosition + diffMonths - 1;
+  scrollPosition = scrollPosition + diffMonths;
   // position code ends
 
   // width code starts
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 5e79822c5..b35d4a749 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index edc24cfc9..0d11da2c0 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index c6fbf329f..edff17a95 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -27,12 +27,12 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index dbe71fae0..461f46835 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>

From 83a0c8163f107334cffb4364b078dba73355cf06 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 18:37:26 +0530
Subject: [PATCH 2/5] dev: redirection implementation on gantt blocks (#1104)

---
 .../cycles/cycles-list-gantt-chart.tsx        | 21 ++++++++++-----
 apps/app/components/cycles/gantt-chart.tsx    | 24 +++++++++--------
 .../components/gantt-chart/blocks/index.tsx   |  4 +--
 apps/app/components/issues/gantt-chart.tsx    | 23 ++++++++--------
 apps/app/components/modules/gantt-chart.tsx   | 24 +++++++++--------
 .../modules/modules-list-gantt-chart.tsx      | 27 ++++++++++++-------
 apps/app/components/views/gantt-chart.tsx     | 24 +++++++++--------
 7 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index ad298e79d..9c8e922d2 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -10,6 +12,9 @@ type Props = {
 };
 
 export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -23,12 +28,14 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 04de7afb7..44abc392b 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 113ca8964..98284cce8 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -39,7 +39,7 @@ export const GanttChartBlocks: FC<{
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                        {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
@@ -54,7 +54,7 @@ export const GanttChartBlocks: FC<{
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                        {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index b35d4a749..8fce3e96f 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
-
+// next imports
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index 0d11da2c0..fa92964c1 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index edff17a95..cb1c7bc07 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -12,6 +14,9 @@ type Props = {
 };
 
 export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -27,15 +32,17 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index 461f46835..dc81f70fa 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date

From a44cddb0fc7b1ae2672fa66722ce048b43445c1d Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:08:28 +0530
Subject: [PATCH 3/5] dev: dropdown overflow issue resolved in kanban (#1106)

---
 apps/app/components/core/board-view/single-board.tsx | 2 +-
 apps/app/components/issues/view-select/assignee.tsx  | 2 ++
 apps/app/components/ui/custom-search-select.tsx      | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index a4f869cb3..16fe0e887 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3 overflow-y-auto">
+              <div className="pt-3 overflow-hidden overflow-y-scroll">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 48149c24f..71e16a092 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -122,6 +122,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       noChevron
       position={position}
       disabled={isNotAllowed}
+      selfPositioned={selfPositioned}
+      dropdownWidth="w-full min-w-[8rem]"
     />
   );
 };
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ef0943377..fb1c0a88c 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
   selfPositioned?: boolean;
   multiple?: boolean;
   footerOption?: JSX.Element;
+  dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
   label,
@@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
   selfPositioned = false,
   multiple = false,
   footerOption,
+  dropdownWidth,
 }: CustomSearchSelectProps) => {
   const [query, setQuery] = useState("");
 
@@ -108,7 +110,9 @@ export const CustomSearchSelect = ({
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+                dropdownWidth ? dropdownWidth : ``
+              } `}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />

From 4238f89cec6bc31cd8ddc1820ec9400da3d62f57 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:27:08 +0530
Subject: [PATCH 4/5] dev: gantt ui changes

---
 .../components/gantt-chart/blocks/index.tsx   |  4 +--
 .../components/gantt-chart/chart/index.tsx    | 35 ++++++++++++++-----
 .../components/gantt-chart/chart/month.tsx    |  2 +-
 apps/app/components/gantt-chart/root.tsx      |  3 ++
 apps/app/components/issues/gantt-chart.tsx    |  5 +--
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 98284cce8..f2d44b294 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{
 
   return (
     <div
-      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
       <div className="w-full">
@@ -44,7 +44,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 6724c3552..72d6888e2 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -37,6 +37,7 @@ import { datePreview, currentViewDataWithView } from "../data";
 import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -46,6 +47,7 @@ type ChartViewRootProps = {
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
   title,
   blocks = null,
   loaderTitle,
@@ -214,10 +216,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
+      } ${
+        border ? `border border-brand-base` : ``
+      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
     >
       {/* chart title */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
@@ -233,7 +237,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             {blocks.length} {loaderTitle}
           </div>
         )}
-      </div>
+      </div> */}
 
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
@@ -248,10 +252,23 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           )}
         </div> */}
 
-        <div className="mr-auto text-sm font-medium">
-          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
-            currentViewData?.data?.endDate
-          )}`}
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">Loading...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length} {loaderTitle}
+            </div>
+          )}
         </div>
 
         <div className="flex flex-wrap items-center gap-2">
@@ -260,7 +277,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
                   currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
@@ -272,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
             onClick={handleToday}
           >
             Today
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 15d02c488..197ac9930 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-brand-surface-1`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index 787df0e46..eb7a1b225 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -14,6 +15,7 @@ type GanttChartRootProps = {
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
   title = null,
   blocks,
   loaderTitle = "blocks",
@@ -23,6 +25,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
+      border={border}
       title={title}
       blocks={blocks}
       loaderTitle={loaderTitle}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 8fce3e96f..1330c2438 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,7 +32,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
     <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
-      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm font-normal">
         <div
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
@@ -68,8 +68,9 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
       : [];
 
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
+        border={false}
         title="Issues"
         loaderTitle="Issues"
         blocks={ganttIssues ? blockFormat(ganttIssues) : null}

From b5325f14aa758ed0d2a7ee09db36533a67a287c4 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:38:33 +0530
Subject: [PATCH 5/5] fix: gantt build issue resolved

---
 apps/app/components/gantt-chart/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index eb7a1b225..c52bc55b0 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -5,7 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
-  border: boolean;
+  border?: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;