镜像站点 · 本页由第三方 GitHub 只读镜像提供,非 GitHub 官方站点,不接受任何登录或凭据输入。前往 github.com
Skip to content

fix(dialog): keep stepped dialog cards top-anchored during crossfade - #2893

Merged
baxen merged 1 commit into
mainfrom
mbot/modal-resize
Nov 6, 2026
Merged

baxen merged 1 commit into
mainfrom
mbot/modal-resize

Conversation

@baxen

@baxen baxen commented Nov 6, 2026

Copy link
Copy Markdown
Collaborator

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.

Dialog with step stacks the outgoing and incoming cards in one grid cell, and each card had align-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):

Discard card during crossfade After the old card unmounts
Before top=324 top=128 (snap)
After top=128 top=128

Change

In overlays.css, steps in top-anchored popups now use align-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 keep align-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

  • Recorded the real CreateChannelDialog in Chromium before and after (shared in Buzz) and sampled getBoundingClientRect() across the transition. The table above shows the results.
  • biome check, design:check, and the compositions.test.tsx and CreateChannelDialog.test.tsx tests pass. The pre-push hooks also pass.
  • Light theme at one width only. I didn't check dark theme, narrow widths or enlarged text.

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>
@baxen
baxen requested a review from a team as a code owner November 6, 2026 21:42
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 6, 2026 •

Copy link
Copy Markdown
Codex Review Summary: ✅ Completed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-06T21:45:02.771280Z 39d9dd4 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@kalvinnchau kalvinnchau left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@baxen
baxen merged commit 1082cab into main Nov 6, 2026
57 of 59 checks passed
@baxen
baxen deleted the mbot/modal-resize branch November 6, 2026 22:14
johnmatthewtennant added a commit that referenced this pull request Nov 6, 2026
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
johnmatthewtennant added a commit that referenced this pull request Nov 6, 2026
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
wpfleger96 added a commit that referenced this pull request Nov 6, 2026
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants