From 9933ce6d15a7fab492ac225d225ee3880880c1b9 Mon Sep 17 00:00:00 2001
From: Bowen7 <zwxdyx@foxmail.com>
Date: Fri, 3 Oct 2025 14:42:10 +0800
Subject: [PATCH] [RMQ-2183] Fix format and adjust support timeline styles

---
 .../CommercialSupportTimelines/index.js        | 18 ++++++++++++------
 .../index.module.css                           |  5 +++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/CommercialSupportTimelines/index.js b/src/components/CommercialSupportTimelines/index.js
index 6afa3b9cc..9fea89c06 100644
--- a/src/components/CommercialSupportTimelines/index.js
+++ b/src/components/CommercialSupportTimelines/index.js
@@ -2,8 +2,15 @@ import Link from '@docusaurus/Link';
 import {getReleaseBranches} from '../RabbitMQServerReleaseInfo';
 import styles from "./index.module.css"
 
-const releaseDateOptions = { year: 'numeric', month: 'short' };
-const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
+function formatDate(date, isReleaseDate) {
+  const year = date.toLocaleDateString("en-US", { year: "numeric" });
+  const month = date.toLocaleDateString("en-US", { month: "short" });
+  if (isReleaseDate) {
+    return `${month} ${year}`;
+  }
+  const day = date.toLocaleDateString("en-US", { day: "numeric" });
+  return `${day} ${month} ${year}`;
+}
 
 function getTimelineRows(releaseBranches) {
   const now = Date.now();
@@ -36,12 +43,12 @@ function getTimelineRows(releaseBranches) {
     const endOfCommunitySupport =
         endOfCommunitySupportDate === undefined
             ? 'Next Release'
-            : endOfCommunitySupportDate.toLocaleDateString('en-GB', dateOptions);
-    const endOfCommercialSupport = endOfCommercialSupportDate.toLocaleDateString("en-GB", dateOptions);
+            : formatDate(endOfCommunitySupportDate, false);
+    const endOfCommercialSupport = formatDate(endOfCommercialSupportDate, false);
 
     rows.push({
       release: branch,
-      releaseDate: releaseDate.toLocaleDateString("en-GB", releaseDateOptions),
+      releaseDate: formatDate(releaseDate, true),
       endOfCommunitySupport,
       endOfCommercialSupport,
       isCommunitySupported,
@@ -58,7 +65,6 @@ export function CommercialSupportTimelines() {
   const releaseBranches = getReleaseBranches();
 
   const rows = getTimelineRows(releaseBranches);
-  console.log(rows)
 
   return (
     <div className="release-information">
diff --git a/src/components/CommercialSupportTimelines/index.module.css b/src/components/CommercialSupportTimelines/index.module.css
index e78338691..8cf03a119 100644
--- a/src/components/CommercialSupportTimelines/index.module.css
+++ b/src/components/CommercialSupportTimelines/index.module.css
@@ -4,9 +4,14 @@
 }
 
 .timelines_table td, .timelines_table th {
+  text-align: center;
   padding: calc(var(--ifm-table-cell-padding) / 2) var(--ifm-table-cell-padding);
 }
 
+.timelines_table td:not(:first-child) {
+  width: 28%;
+}
+
 .supported {
   background-color: var(--ri-color-latest);
 }