fix(devtools): keep the floating trigger in place on window resize

[AlemTuzlak]

The floating trigger moved when the window size changed. It saved its spot as pixels from the top-left corner, so a trigger in the bottom-right corner drifted away from that corner when the window got bigger. This PR saves the spot as a percent of the free space and places the trigger again from that percent on every resize.

🎯 Changes

• triggerCoords now holds a percent (0-100) of the free space from the left and top edges. { x: 100, y: 100 } is the bottom-right corner.
• On first load and on every window resize, the trigger is placed from the stored percent. It keeps the same relative spot and cannot move off-screen.
• Drag and throw still work in pixels, so the bounce animation does not change. The percent is saved when a drag or a throw ends.
• The edges are measured with offsetWidth / offsetHeight, so the hover scale no longer changes the bounds.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Testing

Commands run

• vitest run in packages/devtools: 19 files, 332 tests pass.
• tsc --noEmit and eslint on the changed files: no errors.
• I did not run the full pnpm test:pr.

Manual test

1. Run pnpm --filter @tanstack/devtools-example-react-basic dev and open http://localhost:3005.
2. Clear the tanstack_devtools_settings key in localStorage, then reload.
3. Drag the trigger to the bottom-right corner.
4. Make the window smaller, then bigger again. The trigger stays in the corner. On main, it stays at the old pixel spot and moves away from the corner.
5. Throw the trigger. It still bounces off the edges.

How this PR makes testing easy

New unit tests in trigger.test.tsx cover the percent helpers (toPercent, toPixels): the same percent maps to the same relative spot at any size, and the trigger stays inside the edges.

Risk / rollback

A spot saved by an older version is in pixels. It is now read as a percent and clamped to 100, so the trigger can jump once, usually to the bottom-right corner. It always stays on the page. To undo, revert this PR.

Public API change

triggerCoords in the devtools config has a new meaning.

Before

// pixels from the top-left corner
config={{ triggerMode: 'floating', triggerCoords: { x: 1200, y: 800 } }}

After

// percent of the free space: bottom-right corner
config={{ triggerMode: 'floating', triggerCoords: { x: 100, y: 100 } }}

🤖 Generated with Claude Code

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Note

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

⚙️ Run configuration

Configuration used: Repository: TanStack/devtools/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: a004d943-6b22-4495-b699-2e59a2b6ef68

📥 Commits

Reviewing files that changed from the base of the PR and between 507c3f9 and 24ba863.

📒 Files selected for processing (4)

• .changeset/floating-trigger-percent.md
• packages/devtools/src/components/trigger.test.tsx
• packages/devtools/src/components/trigger.tsx
• packages/devtools/src/context/devtools-store.ts

 __________________________
< Needle. Haystack. Found. >
 --------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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