UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выравнивание сетки главного Ганта

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` }}>