fix(ui): consistent terminal box height across package managers

[kpab]

🔗 Linked issue

Fixes #3016

🧭 Context

Every package manager's command variant stays in the DOM and is shown/hidden with CSS. The container used space-y-1, which only adds spacing to items that aren't the last child. The last PM in the list (nub) is always the structurally-last child, so when you select it, it loses its bottom margin and its command box renders ~4px shorter than the others.

📚 Description

Swapped space-y-1 for flex flex-col gap-1 on the command containers in Terminal/Install.vue and Terminal/Execute.vue. gap only spaces items that are actually rendered, so the hidden variants no longer affect the height and every PM's box is the same size. Visible spacing is unchanged.

Checked with pnpm lint, pnpm test:types and pnpm test (all passing). No new test — the bug lives in the generated CSS layout, which Vitest doesn't render.

📸 Screenshots

Before: non-last package managers rendered slightly taller than the last package manager (nub).

npm	nub

After: npm and nub render with the same terminal box height.

npm	nub

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 7, 2026 9:38pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 7, 2026 9:38pm
npmx-lunaria	Ignored		Jul 7, 2026 9:38pm

[github-actions]

Hello! Thank you for opening your first PR to npmx, @kpab! 🚀

Here’s what will happen next:

1. 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!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. 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.

[coderabbitai]

📝 Walkthrough

Walkthrough

The command-container spacing in Terminal Execute.vue and Install.vue is changed from space-y-1 to flex flex-col gap-1, with a comment noting this avoids layout shifts from hidden package-manager variants. Install.vue additionally gains explicit bottom padding classes.

Changes

Terminal box spacing fix

Layer / File(s)	Summary
Flex-gap spacing fix for terminal containers app/components/Terminal/Execute.vue, app/components/Terminal/Install.vue	Command-list containers switch from space-y-1 to flex flex-col gap-1, adding a comment explaining that flex gap prevents hidden package-manager variants from affecting spacing; Install.vue also adds explicit pb-3/sm:pb-4 padding and reformats the dir="ltr" attribute.

Related issues: #3016 – fixes inconsistent command box height when the last package manager in the list is selected, caused by space-y-1 excluding margin from the structurally-last hidden DOM child.

Estimated code review effort: Low

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address #3016 by updating both Install.vue and Execute.vue to use flex gap instead of space-y.
Out of Scope Changes check	✅ Passed	No clear out-of-scope changes are present; the extra comment and padding tweak support the spacing fix.
Title check	✅ Passed	The title clearly matches the main change: making terminal box height consistent across package managers.
Description check	✅ Passed	The description is directly related to the changes and accurately explains the layout fix and its purpose.

✨ 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.}

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