fix(onboarding): Clip the SCM product section reveal

[jaydgoss]

Based on PR #121495

Chain of upstream PRs as of 2026-08-06

• PR fix(onboarding): Clip the SCM reveal during its exit tween #121495:
  master ← jaygoss/vdy-150-clip-scm-collapsible-reveal-exit

  • PR fix(onboarding): Clip the SCM product section reveal #121497 (THIS ONE):
    jaygoss/vdy-150-clip-scm-collapsible-reveal-exit ← jaygoss/vdy-150-clip-overflow-on-onboarding-animation

TLDR

The products section in SCM project creation appeared at full height, painting over the sections below it while framer-motion animated them into place. It now reveals behind a clipped height tween.

Details

Selecting a platform mounted the products section at its final size. The sections below carry layout="position", so they animate from their old positions while the new content already occupies its final space. For the length of that animation the products grid is drawn on top of Project name, Team, Alert frequency, and the CTA.

ScmCollapsibleReveal already encodes the pattern the rest of this folder uses for exactly this: a height tween behind a clip, which lets siblings in a layout="position" group follow through normal document flow. Two reveals here, because two different transitions produce the section:

• Outer, on the whole section. The early return null became a showSection flag so the reveal stays mounted and can tween in and out. AnimatePresence initial={false} still renders the settled state on first mount, so a page load with a platform already resolved does not animate. trailing moved inside it, so the host's divider collapses with the section rather than being dropped instantly.
• Inner, on the cards. Covers project creation's other path, where the Products header persists and only the cards appear, so the outer reveal never toggles.

Because the reveal mounts at height 0, the card measures no delta at commit time. Its layout animation no longer fires for this change and the siblings never jump.

overflow: hidden on the card itself would have been a smaller change, but that clip is permanent and ScmRepoSelector and TeamSelector both render their menus inline with no menuPortalTarget, so open dropdowns near the card's bottom edge would be cut off.

Section spacing

The card spaced its sections with a flex gap, which sits outside the box the reveal tweens. The gap survived the whole collapse and then vanished in one step on unmount, so the last 24px read as a jump rather than part of the animation.

The card now uses gap="0" and each section carries its own paddingBottom, which puts that spacing inside the animated box. The divider below the section is already passed in as trailing, so it carries the space on both sides of itself and the panel needs no spacing knowledge of its own. Layout.Title renders into a slot Outlet and returns null in place, so it is not a flex child and needed nothing.

Onboarding still spaces its sections with a flex gap and is unchanged.

Fixes VDY-150

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

[linear-code]

VDY-150