fix: align docs page layout with container width by houtanrocky · Pull Request #2897 · npmx-dev/npmx.dev · GitHub

🔗 Linked issue

Closes #2894
See also #2895

🧭 Context

The docs page content area wasn't aligned with the rest of the page layout
loading skeletons and empty state stretched full-width inconsistently.
PR #2895 addressed this by centering the empty state, but @trueberryless
suggested aligning with the container width instead, and also fixing the
skeleton offset.

📚 Description

Added container mx-auto to the loading skeleton and empty state divs
Wrapped docs-content in a parent div to separate layout from content concerns

This aligns all three states (loading, empty, content) consistently with
the container width used across the rest of the page.

Screenshots

before:

laptop:

iphone-14-promax:

after

laptop:

iphone-14-promax:

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 13, 2026 6:38pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 13, 2026 6:38pm
npmx-lunaria	Ignored		Jun 13, 2026 6:38pm

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info ⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0cfcd843-9115-4d0c-aa21-cbbe436b46ad

📥 Commits

Reviewing files that changed from the base of the PR and between a985ae8 and 9929693.

📒 Files selected for processing (1)

app/pages/package-docs/[...path].vue

🚧 Files skipped from review as they are similar to previous changes (1)

app/pages/package-docs/[...path].vue

📝 Walkthrough

Summary by CodeRabbit

Style
- Centre documentation pages in a contained layout with improved vertical spacing for loading skeletons and empty states.
- Render loaded documentation within a nested content container so outer wrappers retain consistent padding.
- Visual presentation refined for more consistent spacing and alignment across loading, empty and loaded states.

Walkthrough

The package docs page template is restructured to centre content consistently. Loading and empty-state sections now render within a container mx-auto centred layout with vertical padding. Rendered documentation is nested inside a .docs-content element, and the outer wrapper carries padding classes instead.

Changes

Package docs page layout

Layer / File(s)	Summary
Centred container and padding structure app/pages/package-docs/[...path].vue	Loading skeleton and empty-state wrappers switched from direct padding to container mx-auto centred layout with py-* spacing and space-y-4. The successful-docs branch (v-else) was changed to use a container mx-auto outer wrapper and now renders docsData?.html inside an inner .docs-content element.

🚥 Pre-merge checks | ✅ 4 ✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: aligning the docs page layout with the container width.
Description check	✅ Passed	The description is well-detailed and directly related to the changeset, explaining the context, changes made, and including before/after screenshots.
Linked Issues check	✅ Passed	The pull request successfully addresses issue #2894 by adding container mx-auto layout to align the empty state and loading skeleton with the page container width.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the layout alignment of the docs page template, directly addressing the linked issue with no out-of-scope modifications.

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

Hello! Thank you for opening your first PR to npmx, @houtan-rocky! 🚀

Here’s what will happen next:

Our GitHub bots will run to check your changes.
If they spot any issues you will see some error messages on this PR.
Don’t hesitate to ask any questions if you’re not sure what these mean!
In a few minutes, you’ll be able to see a preview of your changes on Vercel
One or more of our maintainers will take a look and may ask you to make changes.
We try to be responsive, but don’t worry if this takes a few days.

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!

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/pages/package-docs/[...path].vue (1)
17-30: 🩺 Stability & Availability | 🔴 Critical | ⚡ Quick win

Guard against undefined segments to ensure type safety.

route.params.path?.filter(Boolean) returns undefined (not an empty array) when path is undefined. Lines 18–29 then call methods such as indexOf, slice, and join on segments without a null check, which will throw a TypeError at runtime.

The coding guidelines require strictly type-safe code. Add a fallback to ensure segments is always an array.
🛡️ Proposed fix to initialise segments safely
-  const segments = route.params.path?.filter(Boolean)
+  const segments = route.params.path?.filter(Boolean) ?? []
   const vIndex = segments.indexOf('v')
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/pages/package-docs/`[...path].vue around lines 17 - 30, The code assumes
route.params.path exists; initialize segments with a safe fallback so it's
always an array (e.g., const segments = (route.params.path ??
[]).filter(Boolean)), then proceed using vIndex (segments.indexOf('v')) and
subsequent segments.slice(...).join(...) calls; ensure segments is never
undefined before calling indexOf, slice, or join to preserve type safety for the
packageName/version extraction logic.
Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/pages/package-docs/`[...path].vue:
- Around line 235-237: The content branch currently uses a full-width wrapper
div (the v-else block containing the element with class "p-6 sm:p-8 lg:p-12"
that renders docsData?.html inside the "docs-content" div), causing misalignment
with the loading and empty states; update that outer wrapper to use the same
container classes as the other states (e.g., add "container mx-auto py-6 sm:py-8
lg:py-12" in place of or alongside the existing padding classes) so the loaded
docs are centered and match the loading/empty layouts.

---

Outside diff comments:
In `@app/pages/package-docs/`[...path].vue:
- Around line 17-30: The code assumes route.params.path exists; initialize
segments with a safe fallback so it's always an array (e.g., const segments =
(route.params.path ?? []).filter(Boolean)), then proceed using vIndex
(segments.indexOf('v')) and subsequent segments.slice(...).join(...) calls;
ensure segments is never undefined before calling indexOf, slice, or join to
preserve type safety for the packageName/version extraction logic.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info ⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 66cd7f8e-3f7f-477d-b3bf-8e4a337743a1

📥 Commits

Reviewing files that changed from the base of the PR and between 1c48d0c and a985ae8.

📒 Files selected for processing (1)

app/pages/package-docs/[...path].vue

@trueberryless done

Thank you for your first contribution!

Everything looks good to me 🎉

Co-authored-by: Aakansha Doshi <Aakansha1216@gmail.com>

Thanks for your first contribution, @houtan-rocky! 🎉

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Co-authored-by: Aakansha Doshi <Aakansha1216@gmail.com>

fix: align docs page layout with container width

a985ae8

vercel Bot deployed to Preview – npmx.dev June 12, 2026 22:42 View deployment

coderabbitai Bot reviewed Jun 12, 2026

View reviewed changes

Comment thread app/pages/package-docs/[...path].vue Outdated

trueberryless reviewed Jun 13, 2026

View reviewed changes

Comment thread app/pages/package-docs/[...path].vue Outdated

Fix: move eslint ignore disable comment

9929693

vercel Bot deployed to Preview – npmx.dev June 13, 2026 10:21 View deployment

trueberryless approved these changes Jun 13, 2026

View reviewed changes

credit Aakansha

8eb6db4

Co-authored-by: Aakansha Doshi <Aakansha1216@gmail.com>

trueberryless enabled auto-merge June 13, 2026 18:38

vercel Bot deployed to Preview – npmx.dev June 13, 2026 18:38 View deployment

trueberryless added this pull request to the merge queue Jun 13, 2026

Merged via the queue into npmx-dev:main with commit 1cdbf2a Jun 13, 2026
24 checks passed

github-actions Bot mentioned this pull request Jun 13, 2026

chore: release v0.16.0 #2856

Merged

trueberryless mentioned this pull request Jun 13, 2026

style: center align the docs not available #2895

Closed

fix: align docs page layout with container width by houtanrocky · Pull Request #2897 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

fix: align docs page layout with container width - #2897

fix: align docs page layout with container width#2897
trueberryless merged 3 commits into
npmx-dev:mainfrom
houtanrocky:houtan-rocky/fix-docs-container-alignment

houtanrocky commented Jun 12, 2026

Uh oh!

vercel Bot commented Jun 12, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 12, 2026 •
edited
Loading

Uh oh!

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

codecov Bot commented Jun 12, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

houtanrocky commented Jun 13, 2026

Uh oh!

trueberryless left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: align docs page layout with container width by houtanrocky · Pull Request #2897 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

fix: align docs page layout with container width - #2897

fix: align docs page layout with container width#2897trueberryless merged 3 commits intonpmx-dev:mainnpmx-dev/npmx.dev:mainfrom houtanrocky:houtan-rocky/fix-docs-container-alignmenthoutanrocky/npmx.dev:houtan-rocky/fix-docs-container-alignmentCopy head branch name to clipboard

Conversation

houtanrocky commented Jun 12, 2026

🔗 Linked issue

🧭 Context

📚 Description

Screenshots

before:

after

Uh oh!

vercel Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

codecov Bot commented Jun 12, 2026

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

houtanrocky commented Jun 13, 2026

Uh oh!

trueberryless left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: align docs page layout with container width#2897
trueberryless merged 3 commits into
npmx-dev:mainfrom
houtanrocky:houtan-rocky/fix-docs-container-alignment

vercel Bot commented Jun 12, 2026 •
edited
Loading

coderabbitai Bot commented Jun 12, 2026 •
edited
Loading