From 4fe6d091e02954ce247b08cdba75739c66e39d19 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Sat, 25 Apr 2026 09:34:41 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=80=D0=B0=D0=B2=D0=BD=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D1=81=D0=B5=D1=82=D0=BA=D0=B8=20=D0=B3=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=93=D0=B0=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gantt-chart/preview/timeline-preview.tsx  | 32 ++++++++++++++++---
 plane-src/apps/web/styles/globals.css         | 28 +++++++++++-----
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx
index 6ae5197..9053fd5 100644
--- a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx
+++ b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx
@@ -184,6 +184,19 @@ const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, step
   });
 };
 
+const getTimelineGridLines = (startDate: Date, endDate: Date, dayWidth: number) => {
+  const days = getDaysBetween(startDate, endDate);
+
+  return Array.from({ length: days + 1 }, (_, index) => {
+    const date = addDays(startDate, index);
+    return {
+      id: date.toISOString(),
+      isMonthStart: date.getDate() === 1,
+      left: index * dayWidth,
+    };
+  });
+};
+
 const getShortDateLabel = (date: Date, locale: string) =>
   new Intl.DateTimeFormat(locale || "ru-RU", {
     day: "numeric",
@@ -204,10 +217,11 @@ const isOverdueItem = (item: TGanttTimelinePreviewItem, today: Date) => {
 
 const matchesStatusFilters = (item: TGanttTimelinePreviewItem, activeStatusFilters: TGanttPreviewStatusFilter[]) => {
   if (activeStatusFilters.length === 0) return true;
-  if (!item.state_group) return false;
+  const stateGroup = item.state_group;
+  if (!stateGroup) return false;
 
   return activeStatusFilters.some((filterKey) =>
-    GANTT_STATUS_FILTER_OPTIONS.find((option) => option.key === filterKey)?.groups.includes(item.state_group)
+    GANTT_STATUS_FILTER_OPTIONS.find((option) => option.key === filterKey)?.groups.includes(stateGroup)
   );
 };
 
@@ -304,6 +318,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
     return {
       blocks,
       canvasWidth,
+      gridLines: getTimelineGridLines(startDate, endDate, settings.dayWidth),
       ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale),
       todayLabel: getShortDateLabel(today, locale),
       timelineWidth,
@@ -517,9 +532,18 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
         >
           <div className="nodedc-home-gantt-canvas" style={{ width: `${timeline.canvasWidth}px` }}>
             <div className="nodedc-home-gantt-grid" style={{ width: `${timeline.timelineWidth}px` }} aria-hidden="true">
+              {timeline.gridLines.map((line) => (
+                <div
+                  key={line.id}
+                  className={cn("nodedc-home-gantt-grid-line", {
+                    "nodedc-home-gantt-grid-line-major": line.isMonthStart,
+                  })}
+                  style={{ left: `${line.left}px` }}
+                />
+              ))}
               {timeline.ticks.map((tick) => (
-                <div key={tick.id} className="nodedc-home-gantt-grid-column" style={{ left: `${tick.left}px` }}>
-                  <span>{tick.label}</span>
+                <div key={tick.id} className="nodedc-home-gantt-grid-label" style={{ left: `${tick.left}px` }}>
+                  {tick.label}
                 </div>
               ))}
               <div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }}>
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index cd19e5f..17da84e 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -1893,9 +1893,7 @@
     position: relative;
     min-height: 23.5rem;
     padding: 1rem;
-    background:
-      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 6rem 100%,
-      linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem;
   }
 
   .nodedc-home-gantt-floating {
@@ -1917,22 +1915,36 @@
 
   .nodedc-home-gantt-grid {
     position: absolute;
-    inset: 1rem 1rem 1rem 11.5rem;
+    top: 1rem;
+    bottom: 1rem;
+    left: 12rem;
     z-index: 1;
   }
 
-  .nodedc-home-gantt-grid-column {
+  .nodedc-home-gantt-grid-line {
     position: absolute;
     top: 0;
     bottom: 0;
+    width: 1px;
     min-height: 22rem;
-    border-left: 1px solid rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.045);
+    transform: translateX(-0.5px);
+  }
+
+  .nodedc-home-gantt-grid-line-major {
+    background: rgba(var(--nodedc-card-active-rgb), 0.14);
+  }
+
+  .nodedc-home-gantt-grid-label {
+    position: absolute;
+    top: 0;
     padding-left: 0.75rem;
     color: var(--text-color-placeholder);
     font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0;
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   .nodedc-home-gantt-today-marker {
@@ -2094,10 +2106,10 @@
     }
 
     .nodedc-home-gantt-grid {
-      inset: 1rem 1rem 1rem 9.25rem;
+      left: 11.75rem;
     }
 
-    .nodedc-home-gantt-grid-column {
+    .nodedc-home-gantt-grid-label {
       padding-left: 0.35rem;
       font-size: 0.6rem;
     }