fix(docs): optimize docs layout and mobile navigation styles

[xuanlid]

背景

文档站在不同屏幕尺寸下存在布局体验问题：

• 宽屏下文档内容区和右侧目录区域宽度受限，组件 demo 展示空间不足。
• 顶部 header 第一行和第二行导航的横向间距不统一。
• 移动端窄屏下，header 右侧操作区容易挤压 Logo 文案。
• 移动端二级导航存在多层 padding 叠加，导致导航项位置和选中下划线展示不自然。

修改内容

• 优化文档站顶部 Header 布局

  • Header 容器改为占满宽度，不再受固定最大宽度限制。
  • Header 第一行由 flex 调整为 grid，使 Logo、搜索框、右侧工具区布局更稳定。
  • 抽取 --header-inline-padding，统一 Header 第一行和第二行导航的横向间距。
  • 第二行导航支持横向滚动，避免窄屏下内容被裁切。

• 优化文档页宽屏展示

  • 调整文档内容区和右侧目录的栅格布局。
  • 增加普通文档页和 demo 文档页的内容最大宽度配置。
  • 优化宽屏下侧边栏、正文、右侧目录之间的间距。
  • 使用 VitePress 导航高度变量计算主内容最小高度，减少硬编码。

• 修复移动端样式问题

  • 在 max-width: 640px 下收窄 Header 横向间距，改善 Samsung Galaxy S8+ 等窄屏设备下的挤压问题。
  • 调整移动端二级导航 padding 和 gap，避免多层间距叠加，使导航项和选中下划线展示更自然。

影响范围

• 仅涉及文档站主题样式和布局调整。
• 不影响组件库运行逻辑和公开 API。

验证

• 已检查窄屏移动端场景下 Header 和二级导航展示。
• 已执行 git diff --check，无空白格式问题。

Summary by CodeRabbit

• Style
  • Improved documentation header alignment and responsive spacing across screen sizes.
  • Added horizontal scrolling for secondary navigation on smaller screens.
  • Enhanced wide-screen documentation layouts with better content, sidebar, and spacing proportions.
  • Updated content height handling to adapt dynamically to the navigation layout.
  • Improved mobile tab navigation spacing and touch-friendly presentation.

[coderabbitai]

Walkthrough

The documentation theme updates the header and tab navigation for responsive layouts. It replaces fixed content height calculations with navigation variables and adds wide-screen content, aside, and sidebar layout rules.

Changes

Responsive documentation layout

Layer / File(s)	Summary
Responsive header grid docs/.vitepress/theme/components/CustomHeader.vue	The header uses shared inline padding and a three-column grid. Search and tools receive explicit alignment. Secondary navigation supports horizontal scrolling with hidden scrollbars. Mobile, 640px, and 960px layouts use updated spacing.
Wide-screen documentation grid docs/.vitepress/theme/style.css	Content height uses navigation height variables. At 1280px and 1440px, documentation content, aside, and sidebar areas use responsive widths, grids, padding, and spacing.
Mobile tab spacing docs/.vitepress/theme/components/TabNavigation.vue	Mobile tab navigation removes horizontal padding and increases the gap between items.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: sonyleo

Poem

A rabbit aligns each row,
With padded hops in tow.
Tabs spread wide, scrollbars hide,
Docs make room on every side.
Grids now guide the way—
Responsive hops all day!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the documentation layout and mobile navigation changes in the pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/.vitepress/theme/components/CustomHeader.vue`:
- Around line 386-392: Update the existing max-width: 640px responsive rule in
CustomHeader.vue to set --header-inline-padding to 12px, and remove the direct
padding override on .header-top so both header sections share the same
responsive horizontal padding.
- Around line 412-416: Update the narrow-screen .header-top media-query layout
to use two grid columns when .search-section is hidden, removing the unused
middle column and its associated spacing. Ensure the logo column can shrink or
truncate so the remaining header tools stay within the viewport.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 498e12d8-00ea-442e-9ee1-8fad31f3b51f

📥 Commits

Reviewing files that changed from the base of the PR and between a68761e and e4e7b30.

📒 Files selected for processing (2)

• docs/.vitepress/theme/components/CustomHeader.vue
• docs/.vitepress/theme/style.css

[github-actions]

✅ Preview build completed successfully!

Click the image above to preview.
Preview will be automatically removed when this PR is closed.

[github-actions]

📦 Package Preview

pnpm add https://pkg.pr.new/@opentiny/tiny-robot@46e72ba

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@46e72ba

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@46e72ba

commit: 46e72ba