From 3ea97832e6f48bdd4c48ef440109d6eb2c1d7a15 Mon Sep 17 00:00:00 2001
From: ydliu2 <ydliu2@iflytek.com>
Date: Mon, 1 Jun 2026 11:16:40 +0800
Subject: [PATCH] Fix docs command spacing

---
 apps/docs/app/site.css                  | 71 +++++++++++++++++++++++++
 apps/docs/scripts/check-code-blocks.mjs | 15 ++++++
 2 files changed, 86 insertions(+)

diff --git a/apps/docs/app/site.css b/apps/docs/app/site.css
index f02fa97..285a12a 100644
--- a/apps/docs/app/site.css
+++ b/apps/docs/app/site.css
@@ -3308,6 +3308,77 @@ header .nextra-hamburger {
   color: #07111f;
 }
 
+/* Command readability pass: preserve token spacing and avoid squeezed quality-gate columns. */
+.vekui-code-line__command,
+.vekui-step-list code,
+.vekui-gate-list code {
+  column-gap: 0.45ch;
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+.vekui-code-token {
+  display: inline-block;
+}
+
+.vekui-gate-list {
+  gap: 18px 32px;
+  grid-template-columns: repeat(2, minmax(280px, 1fr));
+}
+
+.vekui-gate-list code {
+  background: transparent;
+  border: 0;
+  color: #dce8f6;
+  display: flex;
+  font-size: 16px;
+  line-height: 1.45;
+  min-height: auto;
+  padding: 0;
+}
+
+.vekui-gate-item__description {
+  margin-top: 6px;
+  max-width: 34rem;
+}
+
+@media (max-width: 760px) {
+  .vekui-gate-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Final proof/code spacing audit: short metrics and commands need room to breathe. */
+.vekui-hero-proof {
+  column-gap: clamp(24px, 3vw, 48px);
+  padding-bottom: clamp(26px, 4vw, 44px);
+}
+
+.vekui-hero-proof strong {
+  line-height: 1.35;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.vekui-code-line__command {
+  align-items: baseline;
+  display: flex;
+}
+
+.vekui-code-token + .vekui-code-token {
+  margin-left: 0.45ch;
+}
+
+.vekui-gate-list code {
+  column-gap: 0;
+}
+
+@media (max-width: 980px) {
+  .vekui-hero-proof strong {
+    white-space: normal;
+  }
+}
+
 /* Command affordance correction: keep real page actions button-like while lists stay text-first. */
 .vekui-components-actions {
   gap: 8px;
diff --git a/apps/docs/scripts/check-code-blocks.mjs b/apps/docs/scripts/check-code-blocks.mjs
index a6edc01..742bd5c 100644
--- a/apps/docs/scripts/check-code-blocks.mjs
+++ b/apps/docs/scripts/check-code-blocks.mjs
@@ -66,10 +66,25 @@ assertIncludes(
   ".vekui-code-token--command",
   "Home command token classes should be styled."
 )
+assertIncludes(
+  siteCss,
+  "column-gap: 0.45ch;",
+  "Command token groups should keep visible spacing between command parts."
+)
+assertIncludes(
+  siteCss,
+  ".vekui-code-token + .vekui-code-token",
+  "Command tokens should keep direct visual spacing even when syntax-highlighted."
+)
 assertIncludes(
   siteCss,
   ".vekui-gate-item__description",
   "Quality gate command descriptions should be styled."
 )
+assertIncludes(
+  siteCss,
+  "grid-template-columns: repeat(2, minmax(280px, 1fr));",
+  "Quality gate commands should avoid squeezed three-column layouts."
+)
 
 console.log("Code block rendering checks passed.")