fix: clickable rows & mobile scrollbar overflow & dynamic line width

[RYGRIT]

this pr:

• fixes: Expand clickable area of file list in code viewer #1073
• The left and right scrollbars on mobile devices extend beyond the code container.
• The previously hard-coded line number width has been changed to be dynamically calculated to prevent insufficient width.

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 7, 2026 0:36am

2 Skipped Deployments

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

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

📝 Walkthrough

Walkthrough

Three Vue components were changed. DirectoryListing.vue altered table structure: the name cell now spans two columns, file sizes are shown inline beside filenames, and link elements receive vertical padding. Viewer.vue adds a computed lineDigits and binds --line-digits to compute the line-number column min-width; it also adds max-w-full and minor border/layout class adjustments. app/pages/package-code/[...path].vue removes md-specific positioning classes so sticky positioning and height apply unconditionally and adds overflow-x-hidden while keeping vertical scrolling.

Possibly related PRs

• fix(i18n): various rtl and arabic fixes #760: Modifies the same app/pages/package-code/[...path].vue page with layout and attribute adjustments, indicating overlapping changes to the code viewer page structure.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	PR description is related to the changeset, addressing scrollbar overflow and line number width issues.
Linked Issues check	✅ Passed	Changes address all objectives from issue #1073: clickable rows expanded, mobile scrollbar overflow fixed, and line width dynamically calculated.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #1073 objectives: DirectoryListing clickable area, Viewer line width, and package-code overflow handling.

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

[RYGRIT]

I found a minor issue; I'll fix it later.

[danielroe]

I think this could be more performant if we set a css variable on the entire column, and reference it in each line....

[RYGRIT]

Ah, I see your point. Moving the calc() logic to CSS keeps the styling concerns (like the 1.5rem padding offset) out of the JavaScript, which improves maintainability.

I'll update it to pass the digit count as a CSS variable (e.g. --line-digits) to the container, and let CSS handle the width calculation. Thanks!

[danielroe]

👌