feat(ui): added word wrap to code viewer by stephansama · Pull Request #2028 · npmx-dev/npmx.dev

stephansama · 2026-03-10T18:18:15Z

🔗 Linked issue

resolves#2027

🧭 Context

scrolling horizontally is annoying when trying to just read code in my opinion.

📚 Description

I just added a small button in the toolbar to toggle word wrap and a class to enable and disable word wrap

I did use gemini to help with this PR however i implemented a similar feature on my personal blog on code blocks. just used the ai to quickly get up to speed

vercel · 2026-03-10T18:18:20Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 17, 2026 10:09am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 17, 2026 10:09am
npmx-lunaria	Ignored		Mar 17, 2026 10:09am

github-actions · 2026-03-10T18:18:59Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-03-10T18:20:35Z

Codecov Report

❌ Patch coverage is 52.00000% with 12 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
app/components/Code/Viewer.vue	52.00%	11 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-10T18:26:03Z

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

release

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1f5a3f31-e152-4f71-a719-f6301f7ac278

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a word-wrap feature to the code viewer: a new optional wordWrap prop and conditional is-wrapped class, a lineNumbersRef template ref, and syncLineHeights logic to align line-number heights with wrapped lines. The component watches wordWrap, calls syncing after updates and on window resize, and updates CSS to use pre-wrap, break-all and remove max-height for wrapped rendering. The package-code page adds a localStorage-backed toggle (npmx-code-word-wrap) with a UI button and passes :word-wrap to the viewer. English i18n (code.files.word_wrap) and schema entries were added.

Suggested reviewers

ghostdevv

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, mentioning the word wrap toggle button and CSS class additions.
Linked Issues check	✅ Passed	The pull request successfully implements word wrap functionality for the code viewer as required by issue `#2027`, including wrapping logic, UI toggle button, and internationalization support.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the word wrap feature. No unrelated modifications to unrelated system components were introduced.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

coderabbitai

Actionable comments posted: 3

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 29d80634-bca0-4cc4-8959-376aa22e6480

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and ca13cca.

📒 Files selected for processing (4)

app/components/Code/Viewer.vue
app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
i18n/locales/en.json
i18n/schema.json

coderabbitai · 2026-03-10T18:26:06Z

+// Synchronize line number heights with code line heights (needed for word wrap)
+function syncLineHeights() {
+ if (!props.wordWrap || !codeRef.value || !lineNumbersRef.value) {
+ // Reset heights if word wrap is disabled
+ if (lineNumbersRef.value) {
+ const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+ nums.forEach(num => (num.style.height = ''))
+ }
+ return
+ }
+
+ const lines = codeRef.value.querySelectorAll<HTMLElement>('code > .line')
+ const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+
+ lines.forEach((line, index) => {
+ const num = nums[index]
+ if (num) {
+ // Use getBoundingClientRect for more precision if needed, but offsetHeight is usually enough
+ const height = line.offsetHeight
+ num.style.height = `${height}px`
+ }
+ })
+}


⚠️ Potential issue | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash# Verify that markdown files default to preview mode, that CodeViewer is mounted with v-show,# and that syncLineHeights currently only reruns on html/wordWrap/resize. rg -n -C3 "const markdownViewMode|<CodeViewer|v-show=\"!fileContent.markdownHtml \\|\\| markdownViewMode === 'code'\"""app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue" rg -n -C3 "function syncLineHeights|offsetHeight|watch\\(|props.wordWrap|useEventListener\\(window, 'resize'""app/components/Code/Viewer.vue"
Repository: npmx-dev/npmx.dev
Length of output: 2129
Re-sync wrapped line heights after the viewer becomes visible.
The parent component mounts CodeViewer with v-show="!fileContent.markdownHtml || markdownViewMode === 'code'" and defaults to preview mode. For markdown files, this means the component is initially hidden (display: none), yet the immediate watcher on [props.selectedLines, props.html] fires during mount and calls syncLineHeights() while the viewer is not rendered. This causes offsetHeight to return 0, setting all line-number heights to 0px. The heights are never corrected when the user switches to code view with word wrap enabled, leaving the line-number column collapsed.
Add visibility detection to skip measurement while hidden, or use a ResizeObserver on the rendered code block to continuously maintain synchronisation.
🧰 Tools
🪛 Biome (2.4.6)
[error] 43-43: This callback passed to forEach() iterable method should not return a value.
(lint/suspicious/useIterableCallbackReturn)

whitep4nth3r · 2026-03-11T17:22:59Z

Hi and thank you for this change!

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

For that reason I don't think we need a toggle and the wrapping can just be implemented using CSS.

whitep4nth3r · 2026-03-11T17:24:09Z

Perhaps we should even have a max line length in the code viewer like in many IDEs.

stephansama · 2026-03-11T17:28:21Z

Hi and thank you for this change!
In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.
For that reason I don't think we need a toggle and the wrapping can just be implemented using CSS.

i was trying to get it to work with css only however i was having a little issue. like it would mostly work but not all the way. i can take another crack at it again when i get out of work. 🫡

nosthrillz · 2026-03-13T21:47:15Z

Hi @whitep4nth3r

I created this PR in response to the same issue, avoiding a toggle
#2070

Hope I'm not stepping on toes, it's my first OSS PR ever 😅

gameroman · 2026-03-15T13:29:41Z

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

I think having a toggle/setting + shortcut would be better because sometimes you do not want the code to be wrapped

coderabbitai

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)
431-432: Simplify icon toggle using v-else and remove redundant !!.
!!wordWrap is unnecessary since wordWrap is already a boolean ref.
Using two v-if directives instead of v-if/v-else means Vue evaluates both conditions on every render.
♻️ Proposed fix
-<span v-if="!!wordWrap" class="i-lucide:wrap-text w-3 h-3" />-<span v-if="!wordWrap" class="i-lucide:text w-3 h-3" />+<span v-if="wordWrap" class="i-lucide:wrap-text w-3 h-3" />+<span v-else class="i-lucide:text w-3 h-3" />

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ab3db15d-0017-40f9-a208-64e41af7e966

📥 Commits

Reviewing files that changed from the base of the PR and between 95848e8 and e14b94f.

📒 Files selected for processing (1)

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

stephansama · 2026-03-17T10:18:12Z

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.
I think having a toggle/setting + shortcut would be better because sometimes you do not want the code to be wrapped

i think the toggle is better for user experience as i prefer word wrap however regular people that i meet hate word wrap. giving the choice to the people i think is the correct move

feat(word-wrap): added word wrap to code viewer
ca13cca

stephansama changed the title ~~feat(word-wrap): added word wrap to code viewer~~feat(ui): added word wrap to code viewerMar 10, 2026

vercelBotdeployed to Preview – npmx.dev March 10, 2026 18:20 View deployment

coderabbitaiBot reviewed Mar 10, 2026
View reviewed changes

chore: merge develop
e64a6b5

vercelBotdeployed to Preview – npmx.dev March 12, 2026 10:53 View deployment

chore: merge main
95848e8

vercelBotdeployed to Preview – docs.npmx.dev March 17, 2026 09:55 View deployment

vercelBotdeployed to Preview – npmx.dev March 17, 2026 09:56 View deployment

chore: made toggle icon switch between modes
e14b94f

vercelBotdeployed to Preview – npmx.dev March 17, 2026 10:01 View deployment

coderabbitaiBot reviewed Mar 17, 2026
View reviewed changes

chore: removed prettier formats
c2108ea

vercelBotdeployed to Preview – npmx.dev March 17, 2026 10:05 View deployment

stephansama added 2 commits March 17, 2026 06:05

chore: addressed ai comments
1e3ed27

chore: removed prettier formatting again 🤦
72c3c6e

vercelBotdeployed to Preview – npmx.dev March 17, 2026 10:09 View deployment

github-actionsBot added the stale This has become stale and may be closed soon label Apr 18, 2026

npmx-dev deleted a comment from github-actionsBotApr 18, 2026

serhalp added the a11y Related to accessibility and inclusion label Apr 20, 2026

serhalp added the needs review This PR is waiting for a review from a maintainer label Apr 20, 2026

github-actionsBot removed the stale This has become stale and may be closed soon label Apr 20, 2026

github-actionsBot added stale This has become stale and may be closed soon and removed stale This has become stale and may be closed soon labels May 20, 2026

github-actionsBot added the stale This has become stale and may be closed soon label Jun 20, 2026

github-actionsBot added the stale-to-close label Jun 28, 2026

github-actionsBot closed this Jun 28, 2026

Uh oh!

Uh oh!

Conversation

stephansama commented Mar 10, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercelBot commented Mar 10, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actionsBot commented Mar 10, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecovBot commented Mar 10, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitaiBot commented Mar 10, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Reviews paused

Walkthrough

Suggested reviewers

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitaiBotMar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

whitep4nth3r commented Mar 11, 2026

Uh oh!

whitep4nth3r commented Mar 11, 2026

Uh oh!

stephansama commented Mar 11, 2026

Uh oh!

nosthrillz commented Mar 13, 2026

Uh oh!

gameroman commented Mar 15, 2026

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

stephansama commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vercelBot commented Mar 10, 2026•
edited
Loading

github-actionsBot commented Mar 10, 2026•
edited
Loading

codecovBot commented Mar 10, 2026•
edited
Loading

coderabbitaiBot commented Mar 10, 2026•
edited
Loading