Repository navigation
fix(dialog): keep stepped dialog cards top-anchored during crossfade - #2893
Conversation
Steps were centered in the shared grid, which is as tall as the larger card while both are mounted. When the exiting card unmounted, the grid collapsed and the remaining card snapped to the popup's top edge (about 200px for Create channel -> Discard changes). Top-anchored popups now align steps to the top; centered compact popups keep centered steps, which already stay put. Co-authored-by: mbot <3754f8729004d95654c46dbab3129e4ab9ef05cc2534e2a3fbfc155983bd637b@buzz.block.builderlab.xyz> Signed-off-by: Bradley Axen <baxen@squareup.com>
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
kalvinnchau
left a comment
There was a problem hiding this comment.
🤖 Code-only review: approve. Steps in top-anchored popups now share the popup top edge, so the remaining card no longer snaps when the other unmounts. Compact popups are centered with translate and keep centered steps. Their center stays fixed, so the override is correct. The step is a direct child of the popup (motion.div under BaseDialog.Popup), so the child selector matches. Scores: minimalness 10, elegance 9 (the three-line comment is dense), correctness 9.
Co-authored-by: Simone <0828be588d5c9c4d092c5b1cf01761d5aef63d6b104807fd8e8284d517dd1a99@buzz.block.builderlab.xyz> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * origin/main: (22 commits) feat(agents): squircle agent avatar previews (#2879) fix(todos): show Todos read-only without Canvas write access (#2799) fix(unread): leave mentions that arrive during catch-up unread (#2801) Show one working indicator while a message's live activity shows (#2851) fix(agents): ask before deleting a team (#2820) fix(dialog): keep stepped dialog cards top-anchored during crossfade (#2893) feat(attention): Interest titles, summaries and named people, and Activity and pause fixes (#2860) fix(messages): Enter on the outside-mention prompt invites again (#2897) feat(agents): keep open agent transcripts current while the agent works (#2844) perf(solo): render a sidebar chat row only when it changes (#2505) fix(solo): restore agent selection during slow background reads (#2751) feat(search): preview unread thread replies in cmd+k (#2743) fix(plugins): suggest SSH when a private HTTPS clone needs credentials (#2455) fix(browser-host): use the Buzz login variant for dev Builderlab sign-in (#2222) refactor(plugin-manager): move distributor values into build settings (#2649) fix(communities): let Cancel, × and Escape leave a Join lookup and name the host that didn't answer (#2821) fix(agents): let watches hear public channels the agent is not in (#1854) Preview and send Drafts & sent in place, with a shared count bubble (#2833) feat(terminal): add an Option as Meta key setting on macOS (#2850) fix(agents): restrict workflow requests in bb-block only (#2518) ... Signed-off-by: John Tennant <jtennant@squareup.com> # Conflicts: # src/bundled/agents/AgentAvatarPicker.tsx # src/bundled/agents/AgentCreate.module.css
Co-authored-by: Simone <0828be588d5c9c4d092c5b1cf01761d5aef63d6b104807fd8e8284d517dd1a99@buzz.block.builderlab.xyz> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * origin/main: (22 commits) feat(agents): squircle agent avatar previews (#2879) fix(todos): show Todos read-only without Canvas write access (#2799) fix(unread): leave mentions that arrive during catch-up unread (#2801) Show one working indicator while a message's live activity shows (#2851) fix(agents): ask before deleting a team (#2820) fix(dialog): keep stepped dialog cards top-anchored during crossfade (#2893) feat(attention): Interest titles, summaries and named people, and Activity and pause fixes (#2860) fix(messages): Enter on the outside-mention prompt invites again (#2897) feat(agents): keep open agent transcripts current while the agent works (#2844) perf(solo): render a sidebar chat row only when it changes (#2505) fix(solo): restore agent selection during slow background reads (#2751) feat(search): preview unread thread replies in cmd+k (#2743) fix(plugins): suggest SSH when a private HTTPS clone needs credentials (#2455) fix(browser-host): use the Buzz login variant for dev Builderlab sign-in (#2222) refactor(plugin-manager): move distributor values into build settings (#2649) fix(communities): let Cancel, × and Escape leave a Join lookup and name the host that didn't answer (#2821) fix(agents): let watches hear public channels the agent is not in (#1854) Preview and send Drafts & sent in place, with a shared count bubble (#2833) feat(terminal): add an Option as Meta key setting on macOS (#2850) fix(agents): restrict workflow requests in bb-block only (#2518) ... Signed-off-by: John Tennant <jtennant@squareup.com> # Conflicts: # src/bundled/agents/AgentCreate.module.css
…ion-and-status * origin/main: feat(agents): team instructions history and agent/team config tools (#2848) test(plugin-manager): use an immutable git socket fixture (#2665) fix(attention): show the attention toggle when an agent has nothing yet (#2907) fix(agents): stream the remote agent introduction 1.5× faster (#2902) fix(relay): stop holding a watched public channel that a read after a reconnect leaves out (#2889) feat(agents): squircle agent avatar previews (#2879) fix(todos): show Todos read-only without Canvas write access (#2799) fix(unread): leave mentions that arrive during catch-up unread (#2801) Show one working indicator while a message's live activity shows (#2851) fix(agents): ask before deleting a team (#2820) fix(dialog): keep stepped dialog cards top-anchored during crossfade (#2893) feat(attention): Interest titles, summaries and named people, and Activity and pause fixes (#2860) fix(messages): Enter on the outside-mention prompt invites again (#2897) feat(agents): keep open agent transcripts current while the agent works (#2844) perf(solo): render a sidebar chat row only when it changes (#2505) fix(solo): restore agent selection during slow background reads (#2751) feat(search): preview unread thread replies in cmd+k (#2743) fix(plugins): suggest SSH when a private HTTPS clone needs credentials (#2455) # Conflicts: # src/features/agents/team-ops.ts
Problem
Switching between steps of different heights in a stepped dialog jumps. For example, Create channel → Discard changes: the small "Discard changes?" card fades in about 200px below the top, then snaps up to the top edge when the crossfade ends. Keep editing jumps the same way in reverse.
Dialogwithstepstacks the outgoing and incoming cards in one grid cell, and each card hadalign-self: center. While both cards are mounted, the grid is as tall as the larger one, so the smaller card is centered in that height. When the outgoing card unmounts, the grid shrinks to the remaining card and the card moves up to the popup's top edge (top: 8rem) in a single frame.Measured on Create channel → Discard changes (1000×800 viewport):
top=324top=128(snap)top=128top=128Change
In
overlays.css, steps in top-anchored popups now usealign-self: start, so both cards share the popup's top edge and nothing moves when one unmounts. Compact popups are centered in the viewport (top: 50%; translate: 0 -50%) and keepalign-self: center. In those, the card's center stays at the viewport center throughout, so they don't jump.This applies to every stepped dialog: Create channel, channel details, members, channel templates and agent share.
This keeps the existing crossfade between two cards. It doesn't morph a single frame from one height to the other.
Testing
CreateChannelDialogin Chromium before and after (shared in Buzz) and sampledgetBoundingClientRect()across the transition. The table above shows the results.biome check,design:check, and thecompositions.test.tsxandCreateChannelDialog.test.tsxtests pass. The pre-push hooks also pass.