SwanHubX · Nexisato · May 21, 2026 · May 20, 2026 · May 20, 2026 · May 20, 2026
diff --git a/.vitepress/en.ts b/.vitepress/en.ts
@@ -43,7 +43,7 @@ export const en = defineConfig({
           { text: 'Swift', link: base_path_guide_cloud + '/integration/integration-swift'},
           { text: 'Ultralytics', link: base_path_guide_cloud + '/integration/integration-ultralytics'},
           { text: 'veRL', link: base_path_guide_cloud + '/integration/integration-verl'},
-          { text: 'Sb3', link: base_path_guide_cloud + '/integration/integration-sb3'},
+          { text: 'SB3', link: base_path_guide_cloud + '/integration/integration-sb3'},
         ]
       },
       { 
@@ -62,7 +62,7 @@ export const en = defineConfig({
         { text: 'Community', link: 'https://swanlab.cn/benchmarks' },
         { text: 'Join Us', link: 'https://rcnpx636fedp.feishu.cn/wiki/BxtVwAc0siV0xrkCbPTcldBEnNP' },
         { text: 'Feedback', link: 'https://geektechstudio.feishu.cn/share/base/form/shrcn8koDFRcH2mMcBYMh9tiKfI' },
-        { text: 'Docs Github', link: 'https://github.com/SwanHubX/SwanLab-Docs' },
+        { text: 'Docs GitHub', link: 'https://github.com/SwanHubX/SwanLab-Docs' },
       ] },
       {
         component: 'HeaderDocHelperButtonEN',
@@ -206,7 +206,7 @@ function sidebarGuideCloud(): SidebarItemEx[] {
     // collapsed: false,
     items: [
       { text: 'Online support', link: 'community/online-support'},
-      { text: 'Github badge', link: 'community/github-badge'},
+      { text: 'GitHub badge', link: 'community/github-badge'},
       { text: 'Paper citation', link: 'community/paper-cite'},
       { text: 'Contributing code', link: 'community/contributing-code'},
       { text: 'Contributing docs', link: 'community/contributing-docs'},
@@ -225,7 +225,7 @@ function sidebarIntegration(): DefaultTheme.SidebarItem[] {
       { text: 'Argparse', link:'integration-argparse' },
       { text: 'Areal', link: 'integration-areal' },
       { text: 'Ascend NPU & MindSpore', link: 'integration-ascend' },
-      { text: 'Catboost', link: 'integration-catboost'},
+      { text: 'CatBoost', link: 'integration-catboost'},
       { text: 'DiffSynth-Studio', link: 'integration-diffsynth-studio' },
       { text: 'EasyR1', link: 'integration-easyr1' },
       { text: 'EvalScope', link: 'integration-evalscope' },
@@ -238,20 +238,20 @@ function sidebarIntegration(): DefaultTheme.SidebarItem[] {
     items: [
       { text: 'HuggingFace Accelerate', link: 'integration-huggingface-accelerate' },
       { text: 'HuggingFace Transformers', link: 'integration-huggingface-transformers' },
-      { text: 'HuggingFace Trl', link: 'integration-huggingface-trl' },
+      { text: 'HuggingFace TRL', link: 'integration-huggingface-trl' },
       { text: 'Hydra', link: 'integration-hydra' },
       { text: 'Keras', link: 'integration-keras' },
       { text: 'LightGBM', link: 'integration-lightgbm'},
       { text: 'LLaMA Factory', link: 'integration-llama-factory'},
       { text: 'LLaMA Factory Online', link: 'integration-llama-factory-online' },
       { text: 'MindSpeed-RL', link: 'integration-mindspeed-rl' },
-      { text: 'MLFlow', link: 'integration-mlflow'},
+      { text: 'MLflow', link: 'integration-mlflow'},
       { text: 'MLX LM', link: 'integration-mlx-lm' },
       { text: 'MMEngine', link: 'integration-mmengine' },
       { text: 'MMPretrain', link: 'integration-mmpretrain' },
       { text: 'MMDetection', link: 'integration-mmdetection' },
       { text: 'MMSegmentation', link: 'integration-mmsegmentation' },
-      { text: 'Modelscope Swift', link: 'integration-swift' },
+      { text: 'ModelScope Swift', link: 'integration-swift' },
       { text: 'NVIDIA-NeMo RL', link: 'integration-nvidia-nemo-rl' },
     ]
   },
@@ -260,7 +260,7 @@ function sidebarIntegration(): DefaultTheme.SidebarItem[] {
     // collapsed: false,
     items: [
       { text: 'OpenAI', link: 'integration-openai' },
-      { text: 'Omegaconf', link: 'integration-omegaconf' },
+      { text: 'OmegaConf', link: 'integration-omegaconf' },
       { text: 'PaddleDetection', link: 'integration-paddledetection' },
       { text: 'PaddleNLP', link: 'integration-paddlenlp' },
       { text: 'PaddleYOLO', link: 'integration-paddleyolo' },
@@ -271,9 +271,9 @@ function sidebarIntegration(): DefaultTheme.SidebarItem[] {
       { text: 'RLinf', link: 'integration-rlinf'},
       { text: 'ROLL', link: 'integration-roll' },
       { text: 'Sentence Transformers', link: 'integration-sentence-transformers'},
-      { text: 'Specforge', link: 'integration-specforge'},
-      { text: 'Stable Baseline3', link: 'integration-sb3' },
-      { text: 'Tensorboard', link: 'integration-tensorboard'},
+      { text: 'SpecForge', link: 'integration-specforge'},
+      { text: 'Stable Baselines3', link: 'integration-sb3' },
+      { text: 'TensorBoard', link: 'integration-tensorboard'},
     ]
   },
   {
@@ -297,7 +297,7 @@ function sidebarExamples(): DefaultTheme.SidebarItem[] {
     text: 'Quick Start',
     // collapsed: false,
     items: [
-      { text: 'Hello_World', link: 'hello_world' },
+      { text: 'Hello World', link: 'hello_world' },
       { text: 'MNIST', link: 'mnist' },
       { text: 'FashionMNIST', link: 'fashionmnist' },
       { text: 'CIFAR10', link: 'cifar10' },

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -1,59 +1,280 @@
 :root {
     --vp-c-brand-1: #107d8b;
-    --vp-layout-max-width:1660px;
+    --vp-layout-max-width: 100%;
     --vp-sidebar-bg-color: var(--vp-c-bg-alt);
-    --vp-sidebar-width: 320px;
+    --vp-sidebar-width: 280px;
     --vp-sidebar-padding-left: 16px;
-    /* --vp-layout-max-width: 65%; */
+    --swanlab-nav-search-max-width: 420px;
+    --swanlab-nav-search-min-width: 180px;
+    --swanlab-nav-title-width: 208px;
 }
 
-
 .dark {
     --vp-c-brand-1: #2e9dac;
 }
 
-/* .VPSidebar {
-    padding-left: 32px !important;
-} */
+/* ===== Header: always fixed, consistent across all pages ===== */
+.VPNav {
+    position: fixed !important;
+    z-index: 30;
+}
 
-.VPDoc.has-aside .content-container {
-    max-width: 800px !important;
+.VPNavBar {
+    border-bottom: 0 !important;
 }
 
-.VPDoc.has-aside .content {
-    max-width: 800px !important;
+.VPNavBar::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    height: 1px;
+    background-color: var(--vp-c-divider);
+    content: "";
+    pointer-events: none;
+}
+
+.VPNavBar .divider {
+    display: none;
+}
+
+.VPNavBar .container {
+    max-width: none !important;
 }
 
 .title {
     border-bottom: transparent !important;
 }
 
-/* 调整搜索框位置 */
+/* Logo: ensure the horizontal logo image renders at proper size in header */
+.VPNavBarTitle .title {
+    min-width: 0;
+}
+
+.VPNavBarTitle .logo {
+    display: block;
+    height: 28px;
+    width: auto;
+    max-width: none;
+    flex-shrink: 0;
+    object-fit: contain;
+}
+
+/* Sidebar clearly below header */
+.VPSidebar {
+    top: var(--vp-nav-height) !important;
+    bottom: 0 !important;
+    max-height: calc(100vh - var(--vp-nav-height));
+    box-sizing: border-box;
+    border-right: 1px solid var(--vp-c-divider);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+@media (min-width: 960px) {
+    .VPNavBar:not(.has-sidebar) .wrapper {
+        padding: 0;
+    }
+
+    .VPNavBar .container > .title,
+    .VPNavBar.has-sidebar .container > .title {
+        width: var(--swanlab-nav-title-width) !important;
+        height: var(--vp-nav-height);
+        padding: 0 24px !important;
+        flex-shrink: 0;
+    }
+
+    .VPNavBarTitle .title {
+        padding: 0 !important;
+    }
+
+    .VPNavBar.has-sidebar .content {
+        padding-left: var(--swanlab-nav-title-width) !important;
+        padding-right: 24px !important;
+    }
+
+    .VPNavBar:not(.has-sidebar) .content {
+        padding-left: 0 !important;
+        padding-right: 24px !important;
+    }
+
+    .VPSidebar {
+        padding-top: 24px !important;
+    }
+
+    .VPSidebar .curtain {
+        display: none;
+    }
+}
+
+/* ===== Search bar: fixed desktop rhythm, responsive smaller screens ===== */
 div.VPNavBarSearch.search {
-    padding: 0px;
-    margin-left: 20px;
-    margin-right: 20px;
-    flex-grow: 1;
+    padding: 0;
+    margin-left: 24px;
+    margin-right: 18px;
+    min-width: var(--swanlab-nav-search-min-width);
+    width: var(--swanlab-nav-search-max-width);
+    max-width: var(--swanlab-nav-search-max-width);
+    flex: 0 1 var(--swanlab-nav-search-max-width);
+}
+
+/* Header nav content: keep homepage and docs pages on the same baseline */
+.VPNavBar .content {
+    max-width: none !important;
+    min-width: 0;
+}
+
+.VPNavBar .content-body {
+    min-width: 0;
+}
+
+.VPNavBarSearchButton {
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.VPNavBarSearchButton .text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.VPNavBarSearchButton .keys {
+    margin-left: auto;
+    flex-shrink: 0;
 }
 
+@media (min-width: 1280px) and (max-width: 1439px) {
+    .VPNavBar .content-body {
+        justify-content: flex-start !important;
+    }
+
+    .VPNavBarMenuLink,
+    .VPFlyout .button {
+        padding-right: 8px !important;
+        padding-left: 8px !important;
+    }
+
+    .header-button,
+    .vp-header-doc-helper-btn,
+    .github-button {
+        margin-left: 6px !important;
+        padding-right: 8px !important;
+        padding-left: 8px !important;
+    }
+}
+
+@media (max-width: 1759px) {
+    div.VPNavBarSearch.search {
+        width: 300px;
+        max-width: 300px;
+        flex-basis: 300px;
+    }
+}
+
+@media (max-width: 1439px) {
+    div.VPNavBarSearch.search {
+        width: 260px;
+        max-width: 260px;
+        flex-basis: 260px;
+    }
+}
+
+@media (min-width: 1280px) and (max-width: 1320px) {
+    div.VPNavBarSearch.search {
+        min-width: 160px;
+        width: 160px;
+        max-width: 160px;
+        margin-left: 16px;
+        margin-right: 12px;
+        flex-basis: 160px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+    .VPNavBarMenu,
+    .VPNavBarTranslations,
+    .VPNavBarAppearance,
+    .VPNavBarSocialLinks,
+    .VPNavBarExtra {
+        display: none !important;
+    }
+
+    .VPNavBarHamburger {
+        display: flex !important;
+    }
+
+    .VPNavScreen {
+        display: block !important;
+    }
+
+    div.VPNavBarSearch.search {
+        min-width: 160px;
+        width: clamp(180px, 36vw, 360px);
+        max-width: 360px;
+        margin-left: 24px;
+        margin-right: 8px;
+        flex: 1 1 280px;
+    }
+}
+
+@media (max-width: 767px) {
+    div.VPNavBarSearch.search {
+        min-width: 0;
+        max-width: none;
+        margin-left: auto;
+        margin-right: 0;
+        flex: 0 0 auto;
+    }
+
+    .VPNavBarSearchButton {
+        width: auto;
+    }
+}
+
+/* ===== 宽屏布局：content 居中，aside 贴右 ===== */
+.VPDoc.has-aside .content {
+    max-width: none !important;
+}
+
+.VPDoc.has-aside .content-container {
+    max-width: 56rem !important;
+    margin: 0 auto;
+    flex: 0 1 auto;
+}
 
-/* 调整右侧导航栏的定位 */
 .VPDoc.has-aside .aside {
     position: sticky;
-    top: var(--vp-header-height);
+    top: var(--vp-nav-height);
     width: 240px;
-    max-height: calc(100vh - var(--vp-header-height));
+    flex: 0 0 240px;
+    max-height: calc(100vh - var(--vp-nav-height));
     overflow-y: auto;
-    margin-left: 32px;
+    padding-right: 32px;
 }
 
-/* 确保在小屏幕上右侧导航栏不会重叠 */
 @media (max-width: 1280px) {
     .VPDoc.has-aside .aside {
         position: static;
         width: 100%;
+        flex: none;
         margin-top: 24px;
-        margin-left: 0;
+        padding-right: 0;
+    }
+}
+
+/* ===== High-resolution screen ===== */
+@media (min-width: 1440px) {
+    .VPDoc.has-aside .content-container {
+        max-width: 60rem !important;
+    }
+}
+
+@media (min-width: 1920px) {
+    .VPDoc.has-aside .content-container {
+        max-width: 64rem !important;
     }
 }