fix: package docs responsiveness

[vrajpal-jhala]

Minor css fixes to prevent horizontal scrollbars on mobile screens. Added word break for

• Symbol names
• code blocks in dt
• Docs descriptions

Closes #835

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 4, 2026 7:34am

2 Skipped Deployments

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

[coderabbitai]

📝 Walkthrough

Walkthrough

A CSS rule word-break: break-all was added and applied to four selectors: .docs-content .docs-symbol-name, .docs-content .docs-members dl dd, .docs-content .docs-members dl dt code, and .docs-content .docs-section .docs-symbol .docs-description. The change is presentational only, allowing long symbol names and description text to break across lines to avoid horizontal overflow on documentation pages. No logic, control flow, error handling or exported/public API declarations were modified.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the CSS changes made to fix responsiveness issues by adding word-break properties to prevent horizontal scrollbars on mobile screens.
Linked Issues check	✅ Passed	The pull request addresses the core objective of issue #835 by implementing word-break CSS rules for symbol names, code blocks, and documentation descriptions to prevent horizontal overflow on mobile viewports.
Out of Scope Changes check	✅ Passed	The changes are limited to CSS modifications in a single file and are directly scoped to addressing the responsiveness issue described in issue #835, with no unrelated alterations.

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

📢 Thoughts on this report? Let us know!

[NandkishorJadoun]

@vrajpal-jhala thanks for the fix. I just tested the preview, the function name wrapping looks great now. However, it seems like there’s still some unexpected horizontal overflow.

It’s causing the hamburger menu to shift to the far right of the page. I’ve attached a screen recording below so you can see exactly what’s happening.

Screencast.from.03-02-26.06.22.03.PM.IST.webm

[vrajpal-jhala]

@vrajpal-jhala thanks for the fix. I just tested the preview, the function name wrapping looks great now. However, it seems like there’s still some unexpected horizontal overflow.

It’s causing the hamburger menu to shift to the far right of the page. I’ve attached a screen recording below so you can see exactly what’s happening.

Screencast.from.03-02-26.06.22.03.PM.IST.webm

Thanks for the quick review. I've noticed some more responsiveness issues. I'll spend some time and try to target them together.

[NandkishorJadoun]

sounds like a plan, since you’re working on these responsiveness issues, could you convert PR status to 'Draft' for now? that way we’ll know it’s still a work in progress, and you can just mark it as 'Ready for Review' once you're happy with the final result. thanks again for the extra effort on this

[whitep4nth3r]

Unfortunately it's not good for accessibility to use scrollbars on blocks of code, because there are no clickable elements inside it and therefore cannot be interacted with.

I know it doesn't look desirable design-wise, but the most accessible way to deal with this is just to wrap all code inside the block regardless.

I wrote about this quite a few years ago and I still reference it. The most important part is here: https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/#elements-that-have-scrollable-content-should-be-accessible-by-keyboard

"Elements that have scrollable content should be accessible by keyboard"

This is in reference to where you mentioned:

"Added horizontal scrollbar for code blocks"

[vrajpal-jhala]

Unfortunately it's not good for accessibility to use scrollbars on blocks of code, because there are no clickable elements inside it and therefore cannot be interacted with.

I know it doesn't look desirable design-wise, but the most accessible way to deal with this is just to wrap all code inside the block regardless.

I wrote about this quite a few years ago and I still reference it. The most important part is here: https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/#elements-that-have-scrollable-content-should-be-accessible-by-keyboard

"Elements that have scrollable content should be accessible by keyboard"

This is in reference to where you mentioned:

"Added horizontal scrollbar for code blocks"

That makes sense. Thank you for your inputs. I've updated the PR and the description accordingly. I believe this should fix the package docs page's responsiveness.

[danielroe]

I noticed svelte docs still wrap, due to a very long link

https://npmxdev-git-fork-vrajpal-jhala-fix-package-docs-r-5c27a0-poetry.vercel.app/package-docs/svelte/v/5.49.1

[vrajpal-jhala]

I noticed svelte docs still wrap, due to a very long link

https://npmxdev-git-fork-vrajpal-jhala-fix-package-docs-r-5c27a0-poetry.vercel.app/package-docs/svelte/v/5.49.1

Great catch! It works now: https://npmx-mwxv95g5f-poetry.vercel.app/package-docs/svelte/v/5.49.1

Menu looks good too

I browsed few more popular packages and they don't have any issues. Please let me know!