fix(query-devtools): add code element style to prevent devtools panel oscillating by akdlsz21 · Pull Request #9625 · TanStack/query

akdlsz21 · 2025-09-06T04:03:35Z

added some CSS to prevent the devtool panel oscillating back and forth when the query key is too long.

Summary by CodeRabbit

Bug Fixes
- Long lines in the Devtools details view now wrap, eliminating horizontal scrolling and overflow.
Style
- Updated code block styling in the details view to wrap text and fit within the container for improved readability and responsiveness.

coderabbitai · 2025-09-06T04:03:41Z

Walkthrough

Adds CSS to wrap long code blocks in the Devtools details view to prevent extended lines: max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word. No logic or control-flow changes.

Changes

Cohort / File(s)	Summary
Devtools details code wrapping styles `packages/query-devtools/src/Devtools.tsx`	Added CSS rules to wrap long code within detailsBody code elements to avoid horizontal overflow. No API/signature changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Fix flickering in Devtools UI when query key is too large (#9624)	❓	Styling likely mitigates overflow but unclear if it fully resolves oscillation in all cases without reproduction evidence.

Suggested reviewers

TkDodo

A rabbit nibbles lines that grew too wide,
Tucks the code where wraps abide.
No more panels flip or sway—
Words now fold the tidy way.
Hippity hop, the UI’s neat,
Long keys trimmed to hop-sized feet!

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/query-devtools/src/Devtools.tsx (1)
3318-3356: LGTM — add min-width: 0 to the flex child to fully eliminate oscillation

The wrap rules on code look good and should stop long keys from forcing reflow. To harden this in flex layouts (where min-width defaults can still cause overflow), set min-width: 0 on the summary row (and/or pre) so the wrapped code can actually shrink within the container.
       & code {
         font-family:
           ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
           'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
+        /* Allow long content to wrap and shrink inside flex containers */
         max-width: 100%;
         white-space: pre-wrap;
         overflow-wrap: anywhere;
         word-break: break-word;
       }
 
+      /* Ensure flex child can shrink; prevents width tug-of-war/flicker */
+      & .tsqd-query-details-summary,
+      & pre {
+        min-width: 0;
+      }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f49cc75 and d41e0f7.

📒 Files selected for processing (1)

packages/query-devtools/src/Devtools.tsx (1 hunks)

nx-cloud · 2025-09-08T12:40:48Z

View your CI Pipeline Execution ↗ for commit 27d0a70

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

☁️ Nx Cloud last updated this comment at 2025-09-08 12:48:16 UTC

codecov · 2025-09-08T12:43:56Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 15.66%. Comparing base (f023881) to head (27d0a70).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #9625       +/-   ##
===========================================
- Coverage   45.50%   15.66%   -29.84%     
===========================================
  Files         209       33      -176     
  Lines        8377     2234     -6143     
  Branches     1904      574     -1330     
===========================================
- Hits         3812      350     -3462     
+ Misses       4118     1649     -2469     
+ Partials      447      235      -212

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`87.00% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`3.48% <ø> (ø)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/query-test-utils	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`10.00% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pkg-pr-new · 2025-09-08T12:47:34Z

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 27d0a70

fix: add work break to code element to prevent DevPanel from expanding

d41e0f7

github-actions Bot added the package: query-devtools label Sep 6, 2025

coderabbitai Bot reviewed Sep 6, 2025

View reviewed changes

Merge branch 'main' into main

27d0a70

TkDodo merged commit af50368 into TanStack:main Sep 8, 2025
8 of 10 checks passed

coderabbitai Bot mentioned this pull request Dec 6, 2025

Features_Request: Timer Diagnostics for Active Queries #9951

Closed

coderabbitai Bot mentioned this pull request Dec 23, 2025

TanStackRouterDevtoolsPanel Is missing a css variables and appears broken TanStack/router#6196

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(query-devtools): add code element style to prevent devtools panel oscillating#9625

fix(query-devtools): add code element style to prevent devtools panel oscillating#9625
TkDodo merged 2 commits intoTanStack:mainfrom
akdlsz21:main

akdlsz21 commented Sep 6, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 6, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

nx-cloud Bot commented Sep 8, 2025 •

edited

Loading

Uh oh!

codecov Bot commented Sep 8, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Sep 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

akdlsz21 commented Sep 6, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Assessment against linked issues

Suggested reviewers

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

nx-cloud Bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

pkg-pr-new Bot commented Sep 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

akdlsz21 commented Sep 6, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 6, 2025 •

edited

Loading

nx-cloud Bot commented Sep 8, 2025 •

edited

Loading

codecov Bot commented Sep 8, 2025 •

edited

Loading