test(query-devtools/Devtools): add test for restoring 'width' to the rendered minimum after a drag clamp by sukvvon · Pull Request #10763 · TanStack/query

sukvvon · 2026-05-23T07:04:12Z

🎯 Changes

Extend Devtools.test.tsx with a test that locks the localStore.width < newWidth restore branch in the resize drag handler — when a drag clamps the stored width down to minWidth (192px) but the panel's min-width: min-content keeps it rendered wider than that, production should write the rendered width back to localStore.width to keep open/close transitions smooth.

Added cases (resize handle, 1):

should restore "width" to the rendered minimum when the panel is dragged below its content width — sits next to the existing clamp-only case but mocks getBoundingClientRect so that the rendered width (250px) stays above minWidth after the drag, then asserts that localStorage.width is restored from the clamped 192px back up to 250px.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

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

…rendered minimum after a drag clamp

coderabbitai · 2026-05-23T07:04:27Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cbd9b573-aa8b-4e12-bf93-95f23e3e1636

📥 Commits

Reviewing files that changed from the base of the PR and between 50a71c3 and d0ffe78.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Devtools.test.tsx

📝 Walkthrough

Walkthrough

This PR adds a single test case to the Devtools test suite that verifies panel width restoration behavior. When a user drags the devtools panel resize handle to shrink it below the minimum content width, the component restores the stored width to match the actual rendered minimum, ensuring the panel does not collapse below its content.

Changes

Devtools Panel Resize Behavior Test

Layer / File(s)	Summary
Panel width restoration when resizing below min-content `packages/query-devtools/src/__tests__/Devtools.test.tsx`	New test case that mocks `getBoundingClientRect` to simulate dragging the devtools panel below its `min-content` threshold and asserts that the stored `TanstackQueryDevtools.width` is restored to the rendered minimum value.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

TanStack/query#10760: Also adds Devtools-related UI tests to the same test file, covering picture-in-picture localStorage behavior.

Suggested labels

package: query-devtools

Poem

🐰 A panel that shrinks with a graceful sigh,
When dragged too small, restored to comply,
The test now ensures it won't go too shy,
Min-content width keeps it standing on high! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a test for restoring the width to the rendered minimum after a drag clamp operation in the Devtools component.
Description check	✅ Passed	The description follows the template structure, explains the changes clearly, includes completed checklist items, and correctly marks this as a dev-only change requiring no changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/query-devtools-devtools-resize-width-restore

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

nx-cloud · 2026-05-23T07:04:40Z

View your CI Pipeline Execution ↗ for commit d0ffe78

Command	Status	Duration	Result
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	29s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-23 07:14:51 UTC

github-actions · 2026-05-23T07:04:54Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-05-23T07:07:34Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10763

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10763

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10763

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10763

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10763

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10763

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10763

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10763

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10763

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10763

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10763

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10763

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10763

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10763

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10763

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10763

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10763

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10763

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10763

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10763

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10763

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10763

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10763

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10763

commit: d0ffe78

github-actions · 2026-05-23T07:14:52Z

size-limit report 📦

Path	Size
react full	12.1 KB (0%)
react minimal	9.07 KB (0%)

test(query-devtools/Devtools): add test for restoring 'width' to the …

d0ffe78

…rendered minimum after a drag clamp

github-actions Bot added the package: query-devtools label May 23, 2026

sukvvon self-assigned this May 23, 2026

sukvvon merged commit d5c6df7 into main May 23, 2026
14 of 15 checks passed

sukvvon deleted the test/query-devtools-devtools-resize-width-restore branch May 23, 2026 07:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Devtools): add test for restoring 'width' to the rendered minimum after a drag clamp#10763

test(query-devtools/Devtools): add test for restoring 'width' to the rendered minimum after a drag clamp#10763
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-resize-width-restore

sukvvon commented May 23, 2026

Uh oh!

coderabbitai Bot commented May 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026

Uh oh!

pkg-pr-new Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 23, 2026

🎯 Changes

✅ Checklist

🚀 Release Impact

Uh oh!

coderabbitai Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 23, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 23, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented May 23, 2026 •

edited

Loading

nx-cloud Bot commented May 23, 2026 •

edited

Loading

pkg-pr-new Bot commented May 23, 2026 •

edited

Loading