fix(ui): remove empty space on the package page when the 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)
docs.npmx.dev	Ready	Preview, Comment	Mar 23, 2026 5:14am
npmx.dev	Ready	Preview, Comment	Mar 23, 2026 5:14am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 23, 2026 5:14am

[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: 7bbfff8b-fce3-4bbb-aeda-3c7922308599

📥 Commits

Reviewing files that changed from the base of the PR and between 86bb869 and 9c63623.

📒 Files selected for processing (1)

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

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

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

---

📝 Walkthrough

Walkthrough

The PR updates the .packagePage CSS grid for desktop (min-width: 1280px) to explicitly set grid-template-rows: auto auto auto 1fr. The change adds that row definition on the desktop breakpoint and removes a grid-template-rows declaration from the tablet block; other breakpoints remain unchanged.

Suggested reviewers

• danielroe
• graphieros
• serhalp

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description is directly related to the changeset, clearly explaining the grid layout fix and its rationale.
Linked Issues check	✅ Passed	The PR successfully implements the proposed fix from issue #2190 by adding grid-template-rows at the desktop breakpoint to prevent unwanted empty space.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the grid layout issue in issue #2190; no unrelated modifications are present.

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

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