fix(ui): use percentage sizes for resizable panels after react-resizable-panels v4 bump [UX-1330]#2539
Merged
Merged
Conversation
…ble-panels v4 bump [UX-1330] react-resizable-panels v4 (bumped from v3 in #2528) interprets bare numeric defaultSize/minSize as pixels, not percentages. The SQL workspace editor pane collapsed to a ~42px strip and the pipeline editor split was similarly broken. Pass percentage strings so v4 reads them as percentages.
Contributor
🚨 Registry drift detectedApp:
Components needing attention
Refresh command: bunx shadcn@latest add @redpanda/alert @redpanda/badge --overwriteGenerated by lookout audit-changes. |
malinskibeniamin
approved these changes
Jun 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The SQL Studio editor pane (and the rp-connect pipeline YAML editor) render with the resize divider collapsed near the top — the editor shrinks to a ~42px strip while the results/lint pane takes the rest. Once you drag the divider it's fine, but it resets on every fresh load / panel remount.
Why
react-resizable-panelswas bumped from v3 → v4 in #2528. In v4 the size parser treats a bare number as pixels, where v3 treated it as a percentage:The SQL workspace and pipeline editor were written for v3 semantics (
defaultSize={42}meaning 42%), so after the bump they became 42px / 70px strips.Fix
Pass percentage strings so v4 reads them as percentages:
sql-workspace.tsx: editordefaultSize="42%"/minSize="15%", resultsminSize="20%"rp-connect/pipeline/index.tsx: editordefaultSize="70%"/minSize="30%", lintdefaultSize="30%"These were the only two
ResizablePanelusages with numeric size props.Ref: UX-1330