Skip to content

fix(ui): keep impersonation button aligned with pointer - #10241

Draft
joshrowley wants to merge 1 commit into
mainfrom
codex/fix-impersonation-button-drag
Draft

joshrowley wants to merge 1 commit into
mainfrom
codex/fix-impersonation-button-drag

Conversation

@joshrowley

@joshrowley joshrowley commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Note

This is a draft PR generated by AI, this will be updated with a human written summary before requesting review.

Description

Dragging the impersonation button can move it faster than the cursor and select text on the page. Calculate its position from the pointer's viewport coordinates and the button's position at drag start, keeping both in CSS pixels. Prevent selection when dragging and clean up listeners on release, cancellation, window blur, and unmount. Keep the sign-out link clickable.

To check the behavior, start an impersonation session in an app using the local UI build. Hover over the button, drag it across the page, and release within the viewport. It should follow the pointer and stay where released without selecting page text. Repeat at a different browser zoom or display scale, then click Sign out and confirm that the session ends.

Before and after in a controlled browser fixture with a mocked session. Both versions receive the same pointer input; movement values are replayed at 2× to reproduce the coordinate mismatch. The original button moves twice as far and leaves the viewport. The fixed button follows the pointer.

Before and after during the same drag

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Oct 14, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 00117d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@clerk/ui Patch
@clerk/chrome-extension Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Oct 14, 2026 6:41pm UTC
swingset Ready Ready Preview Oct 14, 2026 6:41pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 14, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@pkg-pr-new

pkg-pr-new Bot commented Oct 14, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10241

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10241

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10241

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10241

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10241

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10241

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10241

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10241

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10241

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10241

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10241

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10241

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10241

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10241

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10241

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10241

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10241

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10241

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10241

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10241

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10241

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10241

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10241

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10241

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10241

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10241

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10241

commit: 00117d9

This branch was successfully deployed

2 active deployments
Preview – swingset — 00117d9c Deployed Oct 14, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 00117d9c Deployed Oct 14, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant