fix: correct mobile bottom navigation in RTL language

[shuuji3]

fix#1315

• The rtl: prefix can be used to apply unocss class only to RTL locales.
• I also replced 50% with 1/2 to be consistent with other usages.

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 6:36am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 10, 2026 6:36am
npmx-lunaria	Ignored		Feb 10, 2026 6:36am

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request updates the mobile navigation positioning in the package page component. The styling changes replace the previous inset and translate approach with a more precise centering method, including RTL-specific translation adjustments. The modification addresses layout issues observed on small screens, particularly in right-to-left language configurations. No functional logic, error handling, or control-flow changes are introduced.

Possibly related PRs

• feat(ui): add mobile buttons for package nav, and wrap badges #1188: Introduced the initial mobile navigation positioning classes in the same package page component that this PR refines.

Suggested labels

front

Suggested reviewers

• danielroe
• serhalp

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The pull request directly addresses the objective stated in issue #1315 by applying RTL-specific CSS styling to ensure the bottom navigation is fully visible and centred on mobile devices in RTL locales.
Out of Scope Changes check	✅ Passed	All changes are within scope; the pull request modifies only the package navigation styling to fix the RTL mobile layout issue described in issue #1315, with no unrelated alterations.
Description check	✅ Passed	The pull request description clearly describes the changes made: fixing RTL mobile navigation positioning, adding rtl: prefix, replacing 50% with 1/2, and includes before/after screenshots demonstrating the fix.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!