From 78f4a7294b694af5b62a6b3c55ec7446255e4718 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 18 Dec 2025 16:34:21 +0530
Subject: [PATCH] [WEB-5676] style: gantt column outline #8374

---
 .../core/components/gantt-chart/chart/views/month.tsx    | 4 ++--
 .../core/components/gantt-chart/chart/views/quarter.tsx  | 9 ++++-----
 .../web/core/components/gantt-chart/chart/views/week.tsx | 9 ++++-----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/web/core/components/gantt-chart/chart/views/month.tsx b/apps/web/core/components/gantt-chart/chart/views/month.tsx
index 424eabb1f..7c2c7bdc6 100644
--- a/apps/web/core/components/gantt-chart/chart/views/month.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/month.tsx
@@ -62,7 +62,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
             <div className="h-5 w-full flex">
               {weeks?.map((weekBlock) => (
                 <div
-                  key={`sub-title-${weekBlock.startDate}-${weekBlock.endDate}`}
+                  key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
                   className={cn(
                     "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
                     {
@@ -89,7 +89,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
           <div className="h-full w-full flex-grow flex">
             {weeks?.map((weekBlock) => (
               <div
-                key={`column-${weekBlock.startDate}-${weekBlock.endDate}`}
+                key={`column-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
                 className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
                   "bg-accent-primary/20": weekBlock.today,
                 })}
diff --git a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
index ecaedd641..02d746c05 100644
--- a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -21,11 +20,11 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
         quarterBlocks?.map((quarterBlock, rootIndex) => (
           <div
             key={`month-${quarterBlock.quarterNumber}-${quarterBlock.year}`}
-            className="relative flex flex-col outline-[0.25px] outline outline-subtle-1"
+            className="relative flex flex-col outline-[0.25px] outline-subtle-1"
           >
             {/** Header Div */}
             <div
-              className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline outline-subtle-1"
+              className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
@@ -55,7 +54,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-subtle-1",
+                      "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline-subtle-1",
                       {
                         "bg-accent-primary/20": monthBlock.today,
                       }
@@ -80,7 +79,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
               {quarterBlock?.children?.map((monthBlock, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
-                  className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
                     "bg-accent-primary/20": monthBlock.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
diff --git a/apps/web/core/components/gantt-chart/chart/views/week.tsx b/apps/web/core/components/gantt-chart/chart/views/week.tsx
index 873153ef2..976ea717e 100644
--- a/apps/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/week.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -17,7 +16,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
       {currentViewData &&
         weekBlocks?.map((block, rootIndex) => (
           <div
-            key={`month-${block?.startDate}-${block?.endDate}`}
+            key={`month-${block?.startDate.toString()}-${block?.endDate.toString()}`}
             className="relative flex flex-col outline-[0.25px] outline-subtle-1"
           >
             {/** Header Div */}
@@ -47,7 +46,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-subtle-1",
+                      "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
                       {
                         "bg-accent-primary/20": weekDay.today,
                       }
@@ -73,13 +72,13 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
               {block?.children?.map((weekDay, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
-                  className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
                     "bg-accent-primary/20": weekDay.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth}px` }}
                 >
                   {["sat", "sun"].includes(weekDay?.dayData?.shortTitle) && (
-                    <div className="h-full bg-surface-2 outline-[0.25px] outline outline-strong" />
+                    <div className="h-full bg-surface-2 outline-[0.25px] outline-strong" />
                   )}
                 </div>
               ))}