styles(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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2e846441-f757-43fe-835c-fe388c2b6425

📥 Commits

Reviewing files that changed from the base of the PR and between 46e72ba and 150d4f0.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

Walkthrough

The documentation theme updates the header, tab navigation, and page layout for responsive viewports. 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, 360px, 640px, and 960px layouts use updated spacing and control sizes.
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

Mergeability Score: ⚪ Minimal · up to 150d4

This PR only adjusts documentation-site layout and responsive navigation styles; no actionable merge-blocking risk remains beyond normal checks and review.

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.
Title check	✅ Passed	The title clearly and concisely summarizes the documentation layout and mobile navigation style changes.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

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@150d4f0

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@150d4f0

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@150d4f0

commit: 150d4f0

[github-actions]

🧹 Preview Cleaned Up

The preview deployment has been removed.