fix(docs): stabilize shared layout rendering

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,19 +138,23 @@ function HeaderInner({
   const hasLeading = React.Children.count(leading) > 0
   const hasSubleading = React.Children.count(subleading) > 0
 
-  const children = []
+  return (
-  if (hasLeading || hasSubleading) {
+    <Container className="flex size-full items-center gap-4">
-    children.push(
+      {hasLeading || hasSubleading ? (
-      hasLeading ? (
+        <>
+          {hasLeading ? (
             leading
-      ) : hasSubleading ? (
+          ) : (
             <HomeButton href={getDocsHomeHref(resolvedLocale)} />
-      ) : null,
+          )}
-      hasSubleading && <SlashLine />,
+          {hasSubleading ? (
-      subleading
+            <>
-    )
+              <SlashLine />
-  } else {
+              {subleading}
-    children.push(
+            </>
+          ) : 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>
@@ -164,25 +168,20 @@ function HeaderInner({
           <span>K</span>
           <span className="text-slate-300 dark:text-slate-400">it</span>
         </h1>
-    )
+      )}
-  }
+      {actions != null ? (
-
-  if (actions != null) {
-    children.push(
         <div className="-mr-2 ml-auto inline-flex items-center gap-2">
           {actions}
         </div>
-    )
+      ) : null}
-  }
-
-  return (
-    <Container className="flex size-full items-center gap-4">
-      {children}
     </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">

docs/src/index.css

@@ -74,7 +74,7 @@
 
   body,
   #root {
-    @apply min-h-dvh;
+    @apply min-h-dvh min-w-80;
   }
 
   body {