fix: resolve the navigation bar style issue of GenUI-SDK document on mobile devices

[wuyiping0628]

…mobile devices

Summary by CodeRabbit

• Style
  • Enhanced mobile device responsiveness with improved spacing and padding adjustments across small-screen devices, optimizing visual layout for better usability on phones and tablets.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7f274b77-6e12-45fb-be76-6ee858d72cec

📥 Commits

Reviewing files that changed from the base of the PR and between 9c2e0e2 and 723e83e.

📒 Files selected for processing (2)

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

---

Walkthrough

Two CSS media queries were added to improve responsive design across smaller viewport widths. One adjusts header padding for screens up to 679px, and another adjusts tab navigation gap spacing for screens up to 360px.

Changes

Cohort / File(s)	Summary
Responsive Design Media Queries .vitepress/theme/components/CustomHeader.vue, .vitepress/theme/style.css	Added CSS media query breakpoints: max-width: 679px sets .header-bottom horizontal padding to 1rem, and max-width: 360px sets .custom-tabs__header .custom-tabs__nav gap to 1rem.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 Hoppy little screens so small,
We add some breathing space for all,
With padding here and gaps right there,
Our mobile views now look so fair! 🎨✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing navigation bar styling issues on mobile devices, which aligns with the CSS media query additions in both modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch wyp/mb-header-0326

---

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 and usage tips.}