fix(desktop): modal sign-in + branded communities onboarding page by baxen · Pull Request #2147 · block/buzz

baxen · 2026-07-19T23:14:20Z

What & why

Two fixes to the post-login "create or connect your own community" onboarding, per feedback on #2123:

Branding — the signed-in "Your communities" page was black text on a plain white form and felt out of place. Replaced the flat opaque cards with the translucent, borderless frames + pill CTAs used by the invite/key screens, so it reads as part of onboarding. Simplified copy ("Continue"), dropped the "Block-hosted" line.
Modal experience — sign-in and connect-identity (plus the identity-mismatch recovery) now open in a Radix Dialog over the "Your communities" page, which blurs behind the overlay, instead of paging through full screens. The modal closes automatically once you're signed in with a linked, matching identity; closing it clears Builderlab auth and returns to the community picker.

A follow-up commit fixes the modal rendering "weirdly long": it was inheriting min-height:100dvh from the startup-shell class. Rebuilt it on the established branded onboarding-dialog pattern (IdentityKeyHelpDialog): surface="textured" powder card + olive-ink theme, sizing to content.

Scope

Two files only: desktop/.../communities/ui/HostedCommunityOnboarding.tsx and desktop/tests/e2e/onboarding.spec.ts. Rebased cleanly onto latest main (includes #2123, #2141, #2136); modal adopts Cynthia's --buzz-card-textured-min-height opt-in so we share one sizing mechanism.

Testing

Onboarding e2e passed locally before the final rebase. Pushed ahead of a fresh local pass so CI can run in parallel — will confirm green.

Screenshots

Modal (before → after)	Link-identity step	Signed-in "Your communities"

🤖 Generated with Claude Code

Turn the "create or connect your own community" onboarding into a modal experience and align the post-login page with the rest of onboarding, per feedback on #2123. - Sign-in and identity-linking (and the identity-mismatch recovery) now open in a Radix Dialog over the "Your communities" page, which blurs behind the overlay. The modal closes automatically once you're signed in with a linked, matching identity, revealing the communities list/create view. Closing the modal clears Builderlab auth and returns to the community picker. - Brand the post-login page: replace the flat opaque white cards with the translucent, borderless frames and pill CTAs used by the invite/key screens so it reads as part of onboarding rather than a plain form. - Simplify copy: CTA is now "Continue" and the "Block-hosted" Builderlab line is dropped. - The modal re-establishes the always-light onboarding theme inside the portal so it matches the shell in both light and dark system modes. - Update the onboarding e2e assertions for the new modal DOM and copy. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Bradley Axen <baxen@squareup.com> Signed-off-by: Bradley Axen <baxen@squareup.com>

Design pass on the sign-in/link-identity modal per feedback that it was "weirdly long". The panel was inheriting min-height:100dvh from the buzz-startup-shell class (added only to keep the light onboarding palette), so it stretched the full viewport with empty space below the content. - Switch the modal to the established branded onboarding-dialog pattern used by IdentityKeyHelpDialog: surface="textured" (the powder card) + buzz-onboarding-neutral-theme, which sizes to content and drops in the olive-ink treatment. No more full-height white box. - Tighten content: smaller title, olive-ink descriptions, single-column actions, the mismatch npub in a translucent bg-white/50 frame (invite-key aesthetic). Dismiss via the themed X (returns to the community picker), dropping the redundant in-panel Back link. - Update the one e2e assertion that clicked the modal Back to use Close. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Bradley Axen <baxen@squareup.com> Signed-off-by: Bradley Axen <baxen@squareup.com>

…n onboarding modal - Bee mark, titles, and CTAs now paint full-strength foreground instead of the washed pale-blue label / thin weight that read as out of place. - Add a quiet FOSS-vs-hosted-account breadcrumb to the sign-in modal. - Give the error box a stronger treatment (filled chip + medium ink). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

atishpatel · 2026-07-20T02:26:48Z

+                {/* Quiet breadcrumb: Buzz itself is open source; this hosted
+                    relay is the one account-backed piece of the flow. */}
+                <p className="mt-6 max-w-[16rem] border-t border-foreground/10 pt-4 text-xs leading-5 text-foreground/55">
+                  Buzz is open source. Builderlab hosts the relay for this


Did we want to mention Builderlab?

Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co> Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>

cynfria · 2026-07-20T04:26:16Z

wesbillman

Reviewed exact head 56bda7931a7198be71b507d0fb5843d6fd5a29fc. The auth/modal lifecycle is sound: closing an in-flight browser login invalidates the frontend continuation and cancels the native pending login; other dismissals clear auth before returning; successful identity linkage closes automatically; mismatch replacement reloads server state after partial failure. The first-community origin marker also restores owner vs join correctly, and shared overlay customization is additive. CI is fully green.

One user-visible responsive regression remains blocking: the new 4xl, content-width address field supports 63 valid characters but has no width cap/overflow treatment, so ordinary longer names overflow the card/window (minimum app width is 800px). The E2E checks only a 7-character name. Please constrain/scale the composed address line and cover a long valid name.

Freshness note: this head is 17 commits behind current main, though there are no changed-file overlaps and the merge tree is clean. After the layout fix, approval should be against a fresh green head.

wesbillman · 2026-07-20T14:43:32Z

+      style={
+        inline
+          ? undefined
+          : { width: `${name ? name.length : "your-community".length}ch` }


The input grows to name.length characters at text-4xl, while the parent is whitespace-nowrap and neither the input nor address line has a max width, clipping, scaling, or horizontal overflow treatment. At the app's 800px minimum width, a valid 30–63 character community name extends well beyond the textured card/window (63 monospace 4xl glyphs alone are roughly >1,300px). Please keep the composed <name>.<suffix> within the available width—e.g. responsive font/scale or a capped scrolling/faded input—and add an E2E assertion with a long valid name; the current 7-character check cannot catch this.

🤖 Fixed in 9d41f5c5. The composed <name>.<suffix> line now scales its font-size to the container instead of a fixed text-4xl: min(2.25rem, calc(90cqw / (chars * 0.62))) on both the input and the suffix, with container-type: inline-size on the row. Short names keep the full 4xl treatment at wide widths; long names shrink to fit and stay centered — no overflow past the card or the 800px window.

Added an e2e assertion (onboarding.spec.ts) at the 800px minimum width with a max-length 63-char valid name that asserts the line stays within the card surface. Confirmed it fails on the pre-fix build (address right edge landed ~500px negative) and passes now. biome/tsc/px-text/hosted e2e all green locally. Re-requesting your review against the fresh head.

Wes flagged a responsive regression: the composed <name>.<suffix> line renders at a fixed text-4xl with an unbounded name.length-ch input inside a whitespace-nowrap row, so a valid long name overflows the card and window. A name can be up to 63 chars and the suffix (.communities.buzz.xyz) adds another 21 — well past the 800px app minimum (63 monospace 4xl glyphs alone are >1,300px). - Scale the address font-size to the container via a container-query width (min(2.25rem, calc(90cqw / (chars * 0.62)))) on both the input and the suffix, capped at text-4xl so short names keep the full-size treatment and long names shrink to fit while staying centered. Uses an inline rem-capped font-size (zoom-safe, and outside the px-text guard's class/CSS scanning). - Add an e2e assertion at the 800px minimum width with a max-length (63 char) valid name asserting the line stays within the card; the prior 7-char check could not catch this. Verified it fails on the pre-fix build. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Bradley Axen <baxen@squareup.com> Signed-off-by: Bradley Axen <baxen@squareup.com>

* origin/main: Fix persisted agent defaults display (#2182) [codex] Fix missing release tag detection (#2191) feat(web): authenticate gated community browsing (#2190) fix(timeout): unified turn-timeout fix — cap inheritance, steer renewal, activity-aware requeue, LLM stall surfacing (#2175) fix(desktop): scope draft store per workspace relay (#2179) chore(release): release Buzz Mobile version 0.4.8 (#2187) [codex] create release tags with dedicated App (#2186) fix(desktop): avoid forwarding click event as channel callback (#2174) fix(mobile): image upload fails due to unstripped metadata (#2185) Polish agent defaults surfaces: app dropdowns + collapsed Advanced env vars (#2184) chore(release): release Buzz Desktop version 0.4.20 (#2170) perf(relay): compact Git packs before manifest limits (#2172) fix(desktop): composite harness loader opacity (#2180) fix(desktop): modal sign-in + branded communities onboarding page (#2147) feat(cli): add channels create --template for desktop channel templates (#1990) Co-authored-by: Tyler Longwell <tlongwell@block.xyz> Signed-off-by: Tyler Longwell <tlongwell@block.xyz>

baxen and others added 2 commits July 19, 2026 16:07

baxen requested a review from a team as a code owner July 19, 2026 23:14

atishpatel approved these changes Jul 20, 2026

View reviewed changes

npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 added 5 commits July 19, 2026 20:52

wesbillman requested changes Jul 20, 2026

View reviewed changes

baxen requested a review from wesbillman July 20, 2026 16:57

baxen merged commit 8a65d81 into main Jul 20, 2026
20 checks passed

baxen deleted the honey/onboarding-modal-branding branch July 20, 2026 16:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(desktop): modal sign-in + branded communities onboarding page#2147

fix(desktop): modal sign-in + branded communities onboarding page#2147
baxen merged 9 commits into
mainfrom
honey/onboarding-modal-branding

baxen commented Jul 19, 2026

Uh oh!

atishpatel Jul 20, 2026

Uh oh!

cynfria commented Jul 20, 2026

Uh oh!

wesbillman left a comment

Uh oh!

wesbillman Jul 20, 2026

Uh oh!

baxen Jul 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

baxen commented Jul 19, 2026

What & why

Scope

Testing

Screenshots

Uh oh!

atishpatel Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

cynfria commented Jul 20, 2026

Uh oh!

wesbillman left a comment

Choose a reason for hiding this comment

Uh oh!

wesbillman Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

baxen Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants