Improve desktop mobile pairing flow - #5024
Conversation
Signed-off-by: kenny lopez <klopez4212@gmail.com>
|
🤖 Pairing flow screenshots Start pairingThe QR code and three-step guidance share a stable layout.
Confirm codeThe confirmation code replaces the QR code without resizing the card.
PairedCompleted steps and the paired state use the same check treatment.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cc69c654f1
ℹ️ 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".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
The pairing card's side-by-side layout was gated on the viewport via `sm:`, but at the supported 800px minimum window width the settings sidebar and content padding leave the card only ~443px. The QR column plus gap consumed all of it, collapsing the step guidance to ~1px wide and stretching the card to ~1098px tall. Gate the row on the card's own inline size instead, so it stacks until the panel can actually fit both columns. Separately, the six verification-code cells were rem-sized (`w-10`) with rem gaps, so at 150% text zoom they grew to ~417px inside a fixed 266px column, escaping the column and overlapping the step text. Freeze the cell box and gaps in px while leaving the digits on `text-2xl` so they still scale with zoom. Verified by measuring the rendered layout: at an 800px viewport the steps column is now 395px wide and the card 716px tall (was 1px / 1098px), and the code block holds a constant 278px at 100%/125%/150% text scale (was 278/348/417px). No change to the layout or flow at default zoom on a normally-sized window. Co-authored-by: kenny lopez <klopez4212@gmail.com> Signed-off-by: kenny lopez <klopez4212@gmail.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6ebdd301c5
ℹ️ 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".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Moving the code confirmation inline replaced a Radix dialog, which used to announce itself on open. The inline surface had no live region, so a screen reader got no signal that the asynchronous pairing-sas-received event had swapped the QR view for a verification code awaiting confirmation. Add a persistent visually-hidden polite live region that reports the code and the confirm/transfer/paired transitions. It stays mounted across every step because a region inserted at the same time as its text often isn't spoken, and it is sr-only, so nothing changes on screen: the card measures 386px tall before and after, and the region computes to a 1px position:absolute clip-path:inset(50%) box. Co-authored-by: kenny lopez <klopez4212@gmail.com> Signed-off-by: kenny lopez <klopez4212@gmail.com>
wesbillman
left a comment
wesbillman
left a comment
There was a problem hiding this comment.
Reviewed on Wes's behalf at b16504de53fbeab4dec5fa70ad49580a01eaa44c.
I found no blocking correctness, lifecycle, accessibility, or responsive-layout issues in the final head. I traced the full pairing state machine and settings-section unmount path, including cancellation and stale-event handling; checked the container-query and text-zoom fixes; and reviewed the expanded coverage for confirmation, completion/reset, cancellation, reduced motion, and screen-reader status.
Local verification at this exact head:
pnpm --dir desktop build:e2epnpm --dir desktop exec playwright test tests/e2e/mobile-pairing-qr.spec.ts --project=smoke— 4/4 passedgit diff --check 96ae141763e5459beb68a847e0082e931af72f4c...HEAD
pnpm --dir desktop check also completed successfully; Biome reported only pre-existing informational diagnostics outside this PR's changed files. CI is green at this head.
This is a comment review rather than an approval because Wes asked for a thorough review, not an explicit approval action.
…-agents-nav * origin/main: Refine agent runtime controls (#5026) test(desktop): await thread scroll anchor (#3174) Improve desktop mobile pairing flow (#5024) feat(desktop): show selected community in rail (#5000) fix(desktop): stop rate-limited reconnect backfill from tearing down the authenticated socket (#4990) fix(desktop): skip native notifications outside app bundles (#5004) ci: prove the relay-driven mesh lifecycle — discover, join, infer, deny — with real nodes (#3862) fix(desktop): virtualize channel member lists (#4991) fix(desktop): enforce owner-only access in internal builds (#4053) test(desktop): match attachment button label (#4993) fix(acp): pace observer telemetry at 1/s with per-channel batch envelopes (#4917) fix(desktop): enable the content security policy (#4614) Signed-off-by: Duncan <dcfd242e557282d7a1e2cf2e6877522682f1e5c6156dc92ca7d90eaedd3b0f95@buzz.block.builderlab.xyz>
…n-surface * origin/main: (44 commits) fix(buzz-agent): classify read timeouts distinctly in LLM error messages (#4959) Refine agent runtime controls (#5026) test(desktop): await thread scroll anchor (#3174) Improve desktop mobile pairing flow (#5024) feat(desktop): show selected community in rail (#5000) fix(desktop): stop rate-limited reconnect backfill from tearing down the authenticated socket (#4990) fix(desktop): skip native notifications outside app bundles (#5004) ci: prove the relay-driven mesh lifecycle — discover, join, infer, deny — with real nodes (#3862) fix(desktop): virtualize channel member lists (#4991) fix(desktop): enforce owner-only access in internal builds (#4053) test(desktop): match attachment button label (#4993) fix(acp): pace observer telemetry at 1/s with per-channel batch envelopes (#4917) fix(desktop): enable the content security policy (#4614) fix(mobile): merge relay recounts with locally seen thread replies (#4633) fix(desktop): enable message editing in Inbox (#2198) relay: fuzz WebSocket 1012 restart-close timing on graceful drain (BUZZ_DRAIN_JITTER_MS) (#4542) fix(desktop): outline the selected community (#4969) fix(desktop): clamp thread panel to channel surface (#4965) style(messages): increase username contrast (#4948) fix(desktop): rename generic attachment action from 'Attach image' to 'Attach file' (#2381) (#4304) ... # Conflicts: # desktop/src-tauri/src/commands/mod.rs
2 participants
Summary
Test plan
pnpm --dir desktop checkpnpm --dir desktop exec tsc --noEmitpnpm --dir desktop exec playwright test tests/e2e/mobile-pairing-qr.spec.ts --project=smoke