From dc836b62a2d9f3d63c8bebf714174dd45ff00ee8 Mon Sep 17 00:00:00 2001
From: Neo <chengdu1995@gmail.com>
Date: Mon, 25 May 2026 14:12:02 +0800
Subject: [PATCH] fix: align docs content layout

---
 src/css/custom.css                         | 23 ++++++++++++++++------
 src/theme/DocItem/Layout/index.tsx         |  2 +-
 src/theme/DocItem/Layout/styles.module.css | 18 ++++++++++++++++-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 02ac18d6..91a962a1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -754,6 +754,14 @@ body {
   box-sizing: border-box;
 }
 
+@media (min-width: 997px) {
+  .doc-section-subtitle {
+    max-width: 1000px;
+    margin-left: clamp(2rem, 5vw, 5rem);
+    margin-right: auto;
+  }
+}
+
 @media (max-width: 768px) {
   .doc-section-subtitle {
     padding-left: 2rem;
@@ -851,11 +859,14 @@ article h4 {
   display: none !important;
 }
 
-/* Force center all documentation content */
-.col:not(.col--3) {
-  max-width: 1000px !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
+@media (min-width: 997px) {
+  main[class*="docMainContainer"]
+    > .container.padding-top--md.padding-bottom--lg {
+    width: 100% !important;
+    max-width: none !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 
 /* Force section overview to center - using stable attribute selector */
@@ -899,7 +910,7 @@ article h4 {
       article
     )[class*="generatedIndexPage"] {
     max-width: 1000px !important;
-    margin-left: auto !important;
+    margin-left: clamp(2rem, 5vw, 5rem) !important;
     margin-right: auto !important;
     width: 1000px !important;
   }
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 7e1030f4..cbdadc32 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -45,7 +45,7 @@ export default function DocItemLayout({ children }: Props): ReactNode {
   const { metadata } = useDoc()
   return (
     <div className="row">
-      <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
+      <div className={clsx("col", styles.docItemCol)}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
index a89053ed..94c95a54 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -3,6 +3,17 @@
   margin-top: 0;
 }
 
+:global(.col).docItemCol {
+  max-width: 100% !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.docItemContainer {
+  width: 100%;
+  max-width: 1000px;
+}
+
 .docItemWithButton {
   position: relative;
 }
@@ -40,6 +51,11 @@
 
 @media (min-width: 997px) {
   .docItemCol {
-    max-width: 75% !important;
+    flex: 1 1 auto;
+  }
+
+  .docItemContainer {
+    margin-left: clamp(2rem, 5vw, 5rem);
+    margin-right: auto;
   }
 }