Skip to content

feat: add extra wide layout to package page#200

Merged
danielroe merged 4 commits intonpmx-dev:mainfrom
rshigg:feat/package-page-extra-wide-layout
Jan 28, 2026
Merged

feat: add extra wide layout to package page#200
danielroe merged 4 commits intonpmx-dev:mainfrom
rshigg:feat/package-page-extra-wide-layout

Conversation

@rshigg
Copy link
Copy Markdown
Contributor

@rshigg rshigg commented Jan 28, 2026

Summary

On extra wide screens we can use the extra horizontal real estate to float the sidebar when viewing a package page. This PR refactors the styling of the package page and introduces a new layout on screens bigger than 1280px wide.

Changes

  • Make the content of a package page a grid container with named grid areas
  • Use the named grid areas to create a new extra-wide layout with a floating sidebar
  • Make the default container width higher and introduce container-sm for the search page

Screenshots/Video

npmx wide layout

@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 28, 2026

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

Project Deployment Review Updated (UTC)
docs.npmx.dev Ready Ready Preview, Comment Jan 28, 2026 10:00am
npmx.dev Ready Ready Preview, Comment Jan 28, 2026 10:00am

Request Review

Copy link
Copy Markdown
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is absolutely beautiful

@danielroe danielroe enabled auto-merge January 28, 2026 10:01
@danielroe danielroe added this pull request to the merge queue Jan 28, 2026
Merged via the queue into npmx-dev:main with commit 38960e2 Jan 28, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants