fix(cloud-nav): animate and stabilize side-nav collapse by bilal-karim · Pull Request #3606 · temporalio/ui

bilal-karim · 2026-06-25T20:36:20Z

Polishes the Cloud side-nav expand/collapse transition. Two related fixes to the same component group:

1. Animate the width (`navigation-container.svelte`)

The nav declared transition-width, but it never fired: the expanded Cloud nav has an explicit width (w-[13.125rem]) while the collapsed state fell back to content width (auto), which CSS can't interpolate — so the toggle snapped. Pin the collapsed Cloud width to its natural rail size (calc(3rem + 1px) = the 2rem icon column + px-2 padding + 1px border) so the existing transition-width has two definite endpoints, plus a motion-reduce:transition-none guard.

2. Stable header height (`cloud-nav-bar.svelte`)

When the nav collapsed, its header reflowed from a single row into a stacked column (group-data-[nav=closed]:flex-col gap-2, dropping min-h-7), changing its height. Because the nav icon list sits directly below it, every icon shifted vertically on each expand/collapse. Keep the header a constant-height single row in both states (pin min-h-7, hide the logo/subtitle block when collapsed, center the toggle).

Both changes are scoped to the Cloud nav; the OSS nav bar is a separate component and is untouched.

Preview

Before	After
Before.mp4	After.mp4

Testing

Visually verified in cloud-ui (via a locally rebuilt tarball) across expanded and collapsed states for project/namespace nav and the Cloud root.

🤖 Generated with Claude Code

The Cloud nav header reflowed from a single row (expanded) into a stacked column (collapsed: flex-col + gap-2, dropping min-h-7), changing its height. Because the nav icon list sits directly below the header, the icons shifted vertically on every expand/collapse. Keep the header a constant-height single row in both states: pin min-h-7, hide the logo/subtitle block when collapsed, and center the toggle. The icon list's top edge no longer moves. OSS nav bar is unaffected. Co-Authored-By: Claude Opus 4.8 <[email protected]>

vercel · 2026-06-25T20:36:26Z

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

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 29, 2026 9:55pm

The nav declared transition-width but it never fired: the expanded Cloud nav has an explicit width (w-[13.125rem]) while the collapsed state fell back to content width (auto), which CSS can't interpolate, so the toggle snapped. Pin the collapsed Cloud width to its natural rail size so the existing transition-width has two definite endpoints, and add a motion-reduce guard. Co-Authored-By: Claude Opus 4.8 <[email protected]>

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596)

Follow-up to #3606. The nav item labels used a plain symmetric opacity transition, so on collapse they stayed opaque as the panel narrowed over them (a visible "chop") and expand/collapse felt abrupt. Make the label motion direction-aware and paired with the nav's 150ms transition-width, scoped to the Cloud nav only (OSS unchanged): - Collapse: the label leads — a fast 75ms ease-out fade so it clears before the shrinking panel reaches it. - Expand: the label lags — waits 75ms for the panel to open, then fades in linearly over 150ms. Timing lives in a shared cloudNavLabelMotion constant; scoping uses a new data-cloud attribute on the nav container. Co-Authored-By: Claude Opus 4.8 <[email protected]>

Follow-up to #3606. The nav item labels used a plain symmetric opacity transition, so on collapse they stayed opaque as the panel narrowed over them (a visible "chop") and expand/collapse felt abrupt. Make the label motion direction-aware and paired with the nav's 150ms transition-width, scoped to the Cloud nav via a new data-cloud attribute (OSS unchanged): - Collapse: the label leads — a fast 75ms ease-out fade so it clears before the shrinking panel reaches it. - Expand: the label lags — waits 75ms for the panel to open, then fades in linearly over 150ms. Co-Authored-By: Claude Opus 4.8 <[email protected]>

* fix(cloud-nav): smooth label fade on side-nav collapse/expand Follow-up to #3606. The nav item labels used a plain symmetric opacity transition, so on collapse they stayed opaque as the panel narrowed over them (a visible "chop") and expand/collapse felt abrupt. Make the label motion direction-aware and paired with the nav's 150ms transition-width, scoped to the Cloud nav via a new data-cloud attribute (OSS unchanged): - Collapse: the label leads — a fast 75ms ease-out fade so it clears before the shrinking panel reaches it. - Expand: the label lags — waits 75ms for the panel to open, then fades in linearly over 150ms. Co-Authored-By: Claude Opus 4.8 <[email protected]> * Make transition apply to OSS and Cloud * Gate label transition to motion-reduce --------- Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Laura Whitaker <[email protected]>

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646)

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646) Co-authored-by: rossedfort <[email protected]>

* fix(cloud-nav): keep collapsed nav header height stable The Cloud nav header reflowed from a single row (expanded) into a stacked column (collapsed: flex-col + gap-2, dropping min-h-7), changing its height. Because the nav icon list sits directly below the header, the icons shifted vertically on every expand/collapse. Keep the header a constant-height single row in both states: pin min-h-7, hide the logo/subtitle block when collapsed, and center the toggle. The icon list's top edge no longer moves. OSS nav bar is unaffected. Co-Authored-By: Claude Opus 4.8 <[email protected]> * fix(cloud-nav): animate width on expand/collapse The nav declared transition-width but it never fired: the expanded Cloud nav has an explicit width (w-[13.125rem]) while the collapsed state fell back to content width (auto), which CSS can't interpolate, so the toggle snapped. Pin the collapsed Cloud width to its natural rail size so the existing transition-width has two definite endpoints, and add a motion-reduce guard. Co-Authored-By: Claude Opus 4.8 <[email protected]> --------- Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Laura Whitaker <[email protected]>

bilal-karim requested a review from a team as a code owner June 25, 2026 20:36

vercel Bot deployed to Preview June 25, 2026 20:37 View deployment

bilal-karim changed the title ~~fix(cloud-nav): keep collapsed nav header height stable~~ fix(nav): polish cloud side-nav collapse animation Jun 25, 2026

vercel Bot deployed to Preview June 25, 2026 20:48 View deployment

bilal-karim marked this pull request as draft June 25, 2026 20:53

bilal-karim removed the request for review from a team June 26, 2026 14:15

bilal-karim force-pushed the fix/cloud-nav-collapsed-header-shift branch from 08b89f8 to bfebd68 Compare June 29, 2026 15:46

vercel Bot deployed to Preview June 29, 2026 15:47 View deployment

bilal-karim force-pushed the fix/cloud-nav-collapsed-header-shift branch from bfebd68 to 40bfd27 Compare June 29, 2026 16:00

bilal-karim changed the title ~~fix(nav): polish cloud side-nav collapse animation~~ fix(cloud-nav): animate and stabilize side-nav collapse Jun 29, 2026

vercel Bot deployed to Preview June 29, 2026 16:07 View deployment

bilal-karim force-pushed the fix/cloud-nav-collapsed-header-shift branch from e4bad47 to 604e833 Compare June 29, 2026 16:20

vercel Bot deployed to Preview June 29, 2026 16:21 View deployment

bilal-karim marked this pull request as ready for review June 29, 2026 16:35

bilal-karim requested a review from laurakwhit June 29, 2026 16:36

Merge branch 'main' into fix/cloud-nav-collapsed-header-shift

1392079

vercel Bot deployed to Preview June 29, 2026 21:55 View deployment

laurakwhit approved these changes Jun 29, 2026

View reviewed changes

bilal-karim merged commit ddbeb54 into main Jun 30, 2026
18 checks passed

bilal-karim deleted the fix/cloud-nav-collapsed-header-shift branch June 30, 2026 13:52

temporal-cicd Bot mentioned this pull request Jul 2, 2026

chore: bump version to 2.52.0 #3626

Closed

bilal-karim mentioned this pull request Jul 2, 2026

fix(cloud-nav): smooth label fade on side-nav collapse/expand #3628

Merged

temporal-cicd Bot mentioned this pull request Jul 8, 2026

chore: bump version to 2.52.0 #3647

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(cloud-nav): animate and stabilize side-nav collapse#3606

fix(cloud-nav): animate and stabilize side-nav collapse#3606
bilal-karim merged 3 commits into
mainfrom
fix/cloud-nav-collapsed-header-shift

bilal-karim commented Jun 25, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

bilal-karim commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. Animate the width (navigation-container.svelte)

2. Stable header height (cloud-nav-bar.svelte)

Preview

Testing

Uh oh!

vercel Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bilal-karim commented Jun 25, 2026 •

edited

Loading

1. Animate the width (`navigation-container.svelte`)

2. Stable header height (`cloud-nav-bar.svelte`)

vercel Bot commented Jun 25, 2026 •

edited

Loading