fix(theme): keep the reveal circle on the toggle when zoomed

[lorenzocorallo]

With browser zoom, the light/dark reveal circle was centered away from the toggle: its center sat at roughly 0.62× the toggle's distance from the top-left, near the middle of the screen. Chrome applies zoom a second time to px lengths on the view-transition pseudo-elements, so circle(r px at x px y px) no longer matched getBoundingClientRect.

The clip now uses percentages of the snapshot box (the viewport): the center as x / innerWidth and y / innerHeight, and the radius relative to the box's diagonal / √2, which is how circle() resolves a % radius. Zoom doesn't affect these ratios.

Verified in headless Chromium at 1× and 2× device pixels, with and without zoom: 0.67 on <html>: the circle's edge stays centered on the toggle. Before this change it drifted with zoom. pnpm check, typecheck, test and build pass.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 3a9992f0-776a-4c3e-8fcf-13bbddb4d7bc

📥 Commits

Reviewing files that changed from the base of the PR and between 9a3c966 and bf6477f.

📒 Files selected for processing: 1

• src/components/shell/theme.ts

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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