fix(ui): prevent empty space in package grid when readme is short

[howwohmm]

🔗 Linked issue

Fixes #2190

🧭 Context

On packages with short README sections (e.g. /package/next, /package/@angular/core), the left-column blocks (Get started, vulns) had large empty gaps because the grid rows stretched to match the taller sidebar.

📚 Description

The 1280px+ desktop breakpoint was missing grid-template-rows. Without it, extra height from the sidebar spanning all rows gets distributed evenly across every row — inflating install/vulns cells.

Adding grid-template-rows: auto auto auto 1fr pushes all extra space into the readme row (the last one), keeping details/install/vulns compact at the top.

The 1024px breakpoint already had this pattern (auto auto auto auto 1fr).

What it doesn't change

• Sidebar sticky behavior is unaffected (it still spans all rows)
• Mobile layout is unaffected (single column, no spanning)
• No changes to component logic or template

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 11:38am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 11:38am
npmx-lunaria	Ignored		Mar 22, 2026 11:38am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2bca3727-ec16-4f4e-a0d0-064e04399034

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 86bb869.

📒 Files selected for processing (1)

• app/pages/package/[[org]]/[name].vue

---

📝 Walkthrough

Walkthrough

The pull request adds an explicit grid-template-rows property to the desktop layout of the .packagePage CSS grid in the package detail page component. This change sets the row sizing to auto auto auto 1fr, which defines how the four main sections (details, install, vulnerabilities, and readme) are distributed vertically. The modification addresses layout rendering issues where packages with shorter readme content displayed excessive empty space around the "Get started" block by ensuring proper row alignment.

Suggested reviewers

• danielroe
• serhalp

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the grid layout issue, root cause, and the specific CSS fix applied.
Linked Issues check	✅ Passed	The PR directly addresses issue #2190 by adding the missing grid-template-rows declaration at the 1280px+ breakpoint, which prevents empty space in left-column blocks when README is short.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to a single CSS property addition in the desktop breakpoint, directly addressing the layout issue without affecting other components or functionality.

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

• X
• Mastodon
• Reddit
• LinkedIn

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

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.

[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!