From 285918c1a8d717e8539327a2ee02df15096de048 Mon Sep 17 00:00:00 2001
From: Katherine <katherine_15995@163.com>
Date: Wed, 23 Apr 2025 16:49:41 +0800
Subject: [PATCH] style(gantt): gantt chart block overlapping months in
 calendar header for month view (#6753)

* style: gantt block calendar header style improve

* style: gantt block calendar header style improve
---
 .../src/client/components/calendar/calendar.tsx   | 15 +++++----------
 .../src/client/components/calendar/style.tsx      |  3 +++
 .../src/client/components/gantt/gantt.tsx         |  2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/calendar.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/calendar.tsx
index ec81615d9f..4024a5faa8 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/calendar.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/calendar.tsx
@@ -52,12 +52,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       const date = dateSetup.dates[i];
       const bottomValue = date.getFullYear();
       bottomValues.push(
-        <text
-          key={date.getTime()}
-          y={headerHeight * 0.8}
-          x={columnWidth * i + columnWidth * 0.5}
-          className={cx('calendarBottomText')}
-        >
+        <text key={date.getTime()} y={headerHeight * 0.8} x={columnWidth * i + columnWidth * 0.5}>
           {bottomValue}
         </text>,
       );
@@ -98,7 +93,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           key={date.getTime()}
           y={headerHeight * 0.8}
           x={columnWidth * i + columnWidth * 0.5}
-          className={cx('calendarBottomText')}
+          className={styles.calendarBottomText}
         >
           {quarter}
         </text>,
@@ -118,7 +113,7 @@ export const Calendar: React.FC<CalendarProps> = ({
             x1Line={columnWidth * i}
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={Math.abs(xText)}
+            xText={Math.abs(xText) - 200}
             yText={topDefaultHeight * 0.9}
           />,
         );
@@ -139,7 +134,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           key={bottomValue + date.getFullYear()}
           y={headerHeight * 0.8}
           x={columnWidth * i + columnWidth * 0.5}
-          className={cx('calendarBottomText')}
+          className={styles.calendarBottomText}
         >
           {bottomValue}
         </text>,
@@ -189,7 +184,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           key={date.getTime()}
           y={headerHeight * 0.8}
           x={columnWidth * (i + +rtl)}
-          className={cx('calendarBottomText')}
+          className={styles.calendarBottomText}
         >
           {bottomValue}
         </text>,
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/style.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/style.tsx
index b222628f6f..306b91e70d 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/style.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/style.tsx
@@ -23,6 +23,9 @@ const useStyles = createStyles(({ token, css }) => {
       background: ${colorFillAlterSolid};
       border-bottom: 1px solid ${token.colorBorderSecondary};
     `,
+    calendarBottomText: css`
+      font-size: 11px;
+    `,
     nbGanttCalendar: css`
       .calendarbottomtext: {
         textanchor: middle;
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx
index 27ad8c0123..4764299ba3 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx
@@ -47,7 +47,7 @@ import { TaskGantt } from './task-gantt';
 import { TaskGanttContentProps } from './task-gantt-content';
 
 const getColumnWidth = (dataSetLength: any, clientWidth: any) => {
-  const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 50;
+  const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 60;
   return columnWidth;
 };