UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выравнивание home Gantt-шкалы

plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx

@@ -167,7 +167,14 @@ const getTimelineBounds = (items: TGanttTimelinePreviewItem[], settings: TRangeS
   };
 };
 
-const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, stepDays: number, locale: string) => {
+const getTimelineTicks = (
+  startDate: Date,
+  endDate: Date,
+  dayWidth: number,
+  stepDays: number,
+  locale: string,
+  today: Date
+) => {
   const formatter = new Intl.DateTimeFormat(locale || "ru-RU", {
     day: "numeric",
     month: "short",
@@ -178,6 +185,7 @@ const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, step
     const date = addDays(startDate, index * stepDays);
     return {
       id: date.toISOString(),
+      isToday: startOfDay(date).getTime() === startOfDay(today).getTime(),
       label: formatter.format(date).toUpperCase(),
       left: getDaysBetween(startDate, date) * dayWidth,
     };
@@ -320,8 +328,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
       blocks,
       canvasWidth,
       gridLines: getTimelineGridLines(startDate, endDate, settings.dayWidth),
-      ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale),
+      ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale, today),
-      todayLabel: getShortDateLabel(today, locale),
       timelineWidth,
       todayLeft: getDaysBetween(startDate, today) * settings.dayWidth,
     };
@@ -557,13 +564,17 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
                 />
               ))}
               {timeline.ticks.map((tick) => (
-                <div key={tick.id} className="nodedc-home-gantt-grid-label" style={{ left: `${tick.left}px` }}>
+                <div
-                  {tick.label}
+                  key={tick.id}
+                  className={cn("nodedc-home-gantt-grid-label", {
+                    "nodedc-home-gantt-grid-label-today": tick.isToday,
+                  })}
+                  style={{ left: `${tick.left}px` }}
+                >
+                  <span>{tick.label}</span>
                 </div>
               ))}
-              <div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }}>
+              <div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }} />
-                <span className="nodedc-home-gantt-today-pill">Сегодня · {timeline.todayLabel}</span>
-              </div>
             </div>
 
             {selectedPreviewItemId && selectedPreviewItem && (

plane-src/apps/web/styles/globals.css

@@ -2042,7 +2042,7 @@
     flex-direction: column;
     justify-content: center;
     border-radius: 1.7rem;
-    background: #474747 !important;
+    background: #050506 !important;
     padding: 1.6rem 1.35rem;
     padding-right: max(1.35rem, calc(100% - var(--nodedc-home-title-width)));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
@@ -2563,13 +2563,33 @@
   .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;
+    transform: translateX(-50%);
+  }
+
+  .nodedc-home-gantt-grid-label span {
+    display: inline-flex;
+    height: 1.36rem;
+    align-items: center;
+    border-radius: 999px;
+    padding-inline: 0.48rem;
+  }
+
+  .nodedc-home-gantt-grid-label-today {
+    color: rgb(var(--nodedc-on-card-active-rgb));
+  }
+
+  .nodedc-home-gantt-grid-label-today span {
+    background: rgb(var(--nodedc-card-active-rgb));
+    color: rgb(var(--nodedc-on-card-active-rgb));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.42),
+      0 12px 24px rgba(0, 0, 0, 0.24);
   }
 
   .nodedc-home-gantt-today-marker {
@@ -2609,28 +2629,6 @@
     content: "";
   }
 
-  .nodedc-home-gantt-today-pill {
-    position: absolute;
-    top: 0.15rem;
-    left: 0;
-    display: inline-flex;
-    height: 1.75rem;
-    align-items: center;
-    border-radius: 999px;
-    background: rgb(var(--nodedc-card-active-rgb));
-    padding-inline: 0.72rem;
-    color: rgb(var(--nodedc-on-card-active-rgb));
-    font-size: 0.67rem;
-    font-weight: 800;
-    letter-spacing: 0;
-    text-transform: uppercase;
-    white-space: nowrap;
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.42),
-      0 12px 24px rgba(0, 0, 0, 0.24);
-    transform: translateX(-50%);
-  }
-
   .nodedc-home-gantt-row {
     display: grid;
     align-items: center;
@@ -2750,7 +2748,6 @@
     }
 
     .nodedc-home-gantt-grid-label {
-      padding-left: 0.35rem;
       font-size: 0.6rem;
     }