style: fix i18n lunaria style

[Adebesin-Cell]

🔗 Linked issue

Related to #1715

🧭 Context

When you navigate to https://i18n.npmx.dev/, some of the text in dark mode is too dark and not visible. The status table also overflows the layout instead of fitting within the page.

Before – Image 1

Before – Image 2

📚 Description

This PR fixes the dark mode contrast issues and the table overflow on the i18n page.

I also cleaned up some CSS that wasn’t doing anything and corrected the color variables so missing translations are clearly visible in dark mode.

Now – Image 1

Now – Video 1

Screen.Recording.2026-02-28.at.06.12.02.mov

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 28, 2026 8:04am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 28, 2026 8:04am
npmx-lunaria	Ignored		Feb 28, 2026 8:04am

[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!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb5c52b and 26d05eb.

📒 Files selected for processing (1)

• lunaria/styles.ts

---

📝 Walkthrough

Walkthrough

This change wraps the existing status table in a new div with class "status-by-file-wrapper", altering only the surrounding HTML structure. Styles update several colour tokens (including --ln-color-missing, --ln-color-background, and --ln-color-black), add the .status-by-file-wrapper rule with overflow-x scrolling, border-radius and scrollbar styling, relocate border-collapse handling to the wrapper, and add a body rule to set text colour via the updated token. No control-flow or data-processing logic was modified.

Suggested reviewers

• danielroe
• serhalp

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly describes the changes: fixing dark mode contrast issues, resolving table overflow problems, and cleaning up CSS with corrected color variables for better visibility of missing translations.

_{✏️ 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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

lunaria/styles.ts (1)

178-184: Consider using overflow-x: auto instead of scroll.

Using scroll always displays a scrollbar, even when the table fits within the viewport. Using auto would only show the scrollbar when content overflows, providing a cleaner appearance on wider screens.

♻️ Suggested change

     .status-by-file-wrapper {
-      overflow-x: scroll;
+      overflow-x: auto;
       margin-bottom: 1rem;
       border: 1px solid var(--ln-color-table-border);
       border-radius: 0.375rem;
       scrollbar-color: var(--ln-color-gray-6) var(--ln-color-gray-2);
     }

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 671d13a and bb5c52b.

📒 Files selected for processing (2)

• lunaria/components.ts
• lunaria/styles.ts