Skip to content

Package manager command box height inconsistent when last PM in list is selected #3016

Description

@2u841r

Describe the bug

The install/execute command terminal boxes (Terminal/Install.vue, Terminal/Execute.vue) render all package manager variants at once and toggle visibility with CSS based on a data-pm attribute, rather than conditionally rendering only the selected one. The container uses space-y-1 for spacing between rows.

space-y-1's underlying CSS rule excludes the structurally-last DOM child from getting margin-bottom (:not(:last-child)). Since all variants are always in the DOM (just hidden via display:none), whichever package manager happens to be last in the packageManagers array loses that margin whenever it's the one actually selected/visible - making its command box render about 4px shorter than every other package manager's box.

Confirmed by inspecting the rendered box in devtools on /package/starlight-theme-mdbook (local build off main): every other PM shows the same box height, but whichever PM is last in the packageManagers array is consistently about 4px shorter. This isn't tied to a specific package manager - it'll affect whichever one ends up last in the array, so the exact PM affected may differ between main and what's live in production. Exact pixel values will vary by browser/viewport/zoom too, but the relative gap (~4px, matching space-y-1's spacing unit) is consistent.

Additional context

Affects both app/components/Terminal/Install.vue and app/components/Terminal/Execute.vue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions