From 4d3892a5eacfa62839f020402025e4e9f6868a3c Mon Sep 17 00:00:00 2001
From: Maofeng <hornjs@qq.com>
Date: Mon, 21 Sep 2026 16:17:06 +0800
Subject: [PATCH] fix(docs): stabilize shared layout rendering

---
 docs/src/components/layout.tsx | 79 +++++++++++++++++-----------------
 docs/src/index.css             |  2 +-
 2 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/docs/src/components/layout.tsx b/docs/src/components/layout.tsx
index eb59e62..e17657c 100644
--- a/docs/src/components/layout.tsx
+++ b/docs/src/components/layout.tsx
@@ -38,7 +38,7 @@ export function HomeButton({
   return (
     <a
       href={href}
-      className="flex items-center gap-2 py-1 transition-colors hover:text-indigo-500 dark:hover:text-indigo-400"
+      className="flex items-center gap-2 py-1 transition-colors hover:text-indigo-500 dark:hover:text-indigo-400 shrink-0"
     >
       <Icon name="tabler:smart-home" className="size-5" />
       {label ?? t({ zh: "首页", us: "Home" })}
@@ -138,51 +138,50 @@ function HeaderInner({
   const hasLeading = React.Children.count(leading) > 0
   const hasSubleading = React.Children.count(subleading) > 0
 
-  const children = []
-  if (hasLeading || hasSubleading) {
-    children.push(
-      hasLeading ? (
-        leading
-      ) : hasSubleading ? (
-        <HomeButton href={getDocsHomeHref(resolvedLocale)} />
-      ) : null,
-      hasSubleading && <SlashLine />,
-      subleading
-    )
-  } else {
-    children.push(
-      <h1 className="min-w-0 text-2xl font-semibold sm:text-3xl">
-        <span>S</span>
-        <span className="text-slate-300 dark:text-slate-400">imple</span>
-        <span>&nbsp;</span>
-        <span>R</span>
-        <span className="text-slate-300 dark:text-slate-400">eact</span>
-        <span>&nbsp;</span>
-        <span>A</span>
-        <span className="text-slate-300 dark:text-slate-400">pp</span>
-        <span>&nbsp;</span>
-        <span>K</span>
-        <span className="text-slate-300 dark:text-slate-400">it</span>
-      </h1>
-    )
-  }
-
-  if (actions != null) {
-    children.push(
-      <div className="-mr-2 ml-auto inline-flex items-center gap-2">
-        {actions}
-      </div>
-    )
-  }
-
   return (
     <Container className="flex size-full items-center gap-4">
-      {children}
+      {hasLeading || hasSubleading ? (
+        <>
+          {hasLeading ? (
+            leading
+          ) : (
+            <HomeButton href={getDocsHomeHref(resolvedLocale)} />
+          )}
+          {hasSubleading ? (
+            <>
+              <SlashLine />
+              {subleading}
+            </>
+          ) : null}
+        </>
+      ) : (
+        <h1 className="min-w-0 text-2xl font-semibold sm:text-3xl">
+          <span>S</span>
+          <span className="text-slate-300 dark:text-slate-400">imple</span>
+          <span>&nbsp;</span>
+          <span>R</span>
+          <span className="text-slate-300 dark:text-slate-400">eact</span>
+          <span>&nbsp;</span>
+          <span>A</span>
+          <span className="text-slate-300 dark:text-slate-400">pp</span>
+          <span>&nbsp;</span>
+          <span>K</span>
+          <span className="text-slate-300 dark:text-slate-400">it</span>
+        </h1>
+      )}
+      {actions != null ? (
+        <div className="-mr-2 ml-auto inline-flex items-center gap-2">
+          {actions}
+        </div>
+      ) : null}
     </Container>
   )
 }
 
-export function SiteFooter({ className, ...rest }: React.ComponentProps<"footer">) {
+export function SiteFooter({
+  className,
+  ...rest
+}: React.ComponentProps<"footer">) {
   return (
     <footer className={cn("py-8", className)} {...rest}>
       <Container className="text-center text-slate-500 dark:text-slate-400">
diff --git a/docs/src/index.css b/docs/src/index.css
index bef5509..46a09eb 100644
--- a/docs/src/index.css
+++ b/docs/src/index.css
@@ -74,7 +74,7 @@
 
   body,
   #root {
-    @apply min-h-dvh;
+    @apply min-h-dvh min-w-80;
   }
 
   body {