fix(query-devtools): add code element style to prevent devtools panel oscillating #9625
Conversation
WalkthroughAdds 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
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Assessment against linked issues
Suggested reviewers
✨ Finishing Touches
🧪 Generate unit tests
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 oscillationThe 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.
📒 Files selected for processing (1)
packages/query-devtools/src/Devtools.tsx(1 hunks)
|
View your CI Pipeline Execution ↗ for commit 27d0a70
☁️ Nx Cloud last updated this comment at |
Codecov Report✅ All modified and coverable lines are covered by tests. 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
🚀 New features to boost your workflow:
|
2 participants
added some CSS to prevent the devtool panel oscillating back and forth when the query key is too long.
fixes #9624
Summary by CodeRabbit