fix: wrap code viewer lines by computing width

[nosthrillz]

🔗 Linked issue

Attempts to resolve 2027

🧭 Context

The current approach has overflow-x-auto, but wrapping might be better.
It's unclear whether that's preferred, so making the PR to allow a preview.

📚 Description

We actually can compute available screen width, so we can avoid overflow, and instead set the width and use flex-wrap combined with pre-wrap to get the desired effect.

Potential points of contention / concerns

I didn't visually test the highlighting, I'm yet unsure what the implications would be :)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 13, 2026 9:56pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 13, 2026 9:56pm
npmx-lunaria	Ignored		Mar 13, 2026 9:56pm

[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

This pull request updates the code viewer and package-code page presentation without changing behaviour or public signatures. The Code Viewer moves style application to the root, exposes a --line-digits CSS variable, computes --line-numbers-width, and converts the layout to a flex-based structure that lets code lines wrap while allowing highlighted lines to span full width. The package-code page receives a .main-content wrapper and responsive sidebar (.file-tree) and viewer (.file-viewer) width rules to manage column sizing.

Possibly related PRs

• fix(ui): ensure selected line highlights full width in code viewer #1924: Modifies code-lines and highlighted-line styling in the Code Viewer with overlapping changes to line layout and highlight rendering.
• fix: clickable rows & mobile scrollbar overflow & dynamic line width #1080: Introduces a computed lineDigits value and exposes it via a --line-digits CSS variable, directly related to the line-number width calculation changes here.

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly addresses the changeset by explaining the motivation for replacing overflow-x-auto with computed width and flex-wrap/pre-wrap for line wrapping.

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: db7d3812-0584-449a-ac8f-5830e35c5103

📥 Commits

Reviewing files that changed from the base of the PR and between 9e8c805 and da6f15a.

📒 Files selected for processing (2)

• app/components/Code/Viewer.vue
• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)

588-603: @screen usage now correct; minor responsiveness consideration remains.

The @screen lg directive is correctly placed at top-level (not nested), addressing the previous review feedback. The switch from 100vw to 100% is also appropriate.

However, .file-viewer width applies at all breakpoints, whilst .file-tree is only visible on md+ screens. On mobile, this subtracts sidebar space for a hidden element. The flex-1 class should compensate via flex-grow, but consider scoping the width rule to md+ for clarity:

Option: Scope width rules to md+ breakpoint

 .file-tree {
   width: var(--sidebar-space);
 }
+@screen md {
+  .file-viewer {
+    width: calc(100% - var(--sidebar-space));
+  }
+}
-.file-viewer {
-  width: calc(100% - var(--sidebar-space));
-}

Alternatively, since .file-viewer already has flex-1 min-w-0 in the template, the explicit width may be unnecessary if flexbox sizing is sufficient.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d420e8f0-1328-42ad-968d-7926a66f68b3

📥 Commits

Reviewing files that changed from the base of the PR and between da6f15a and a6e9ca5.

📒 Files selected for processing (2)

• app/components/Code/Viewer.vue
• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[gameroman]

A toggle would be nice and also line numbers should adapt

Example comparison

https://npmx.dev/package-code/grammy/v/1.41.1/out%2Fbot.d.ts

https://npmx-axzqrskfc-npmx.vercel.app/package-code/grammy/v/1.41.1/out%2Fbot.d.ts

[nosthrillz]

Switching to Draft because the line numbers need to be recomputed. As attempted in https://github.com/npmx-dev/npmx.dev/pull/2028/changes as well

[WilcoSp]

the wrapping is very readable and atm I also only see the issue of the line numbers & the highlighting included with it.

a file that may be good to check would be in nuxt the /dist/index.mjs file because it has large imports