Skip to content

refactor(uikit-playground,deps): Update react-split-pane #41118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 1 commit into from
Jun 30, 2026
Merged

refactor(uikit-playground,deps): Update react-split-pane #41118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/uikit-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"react": "~19.2.7",
"react-dom": "~19.2.7",
"react-router-dom": "^6.30.4",
"react-split-pane": "^0.1.92",
"react-split-pane": "^3.2.0",
"react-virtuoso": "~4.18.10",
"reactflow": "^11.11.4"
},
Expand Down
20 changes: 10 additions & 10 deletions apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import './splitPlane.css';
import { useEffect, useContext } from 'react';
import SplitPane from 'react-split-pane';
import { Pane, SplitPane } from 'react-split-pane';

import { context, previewTabsToggleAction } from '../../../Context';
import Display from '../Display';
Expand All @@ -25,22 +25,22 @@ const SplitPlaneContainer = ({ previewSize }: SplitPlaneContainerProps) => {
dispatch(previewTabsToggleAction(0));
}, [isTablet, dispatch]);

const splitPaneProps = {
defaultSize: (previewSize.inlineSize || 1) * 0.5,
minSize: 300,
maxSize: (previewSize.inlineSize || 1) - 350,
allowResize: !isTablet,
};
const minSize = 300;
const maxSize = (previewSize.inlineSize || 1) - 350;
Comment thread
coderabbitai[bot] marked this conversation as resolved.

@cubic-dev-ai cubic-dev-ai Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1: maxSize can be smaller than minSize, creating invalid pane constraints. This can break SplitPane sizing on initial/compact renders.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx, line 29:

<comment>`maxSize` can be smaller than `minSize`, creating invalid pane constraints. This can break SplitPane sizing on initial/compact renders.</comment>

<file context>
@@ -25,22 +25,22 @@ const SplitPlaneContainer = ({ previewSize }: SplitPlaneContainerProps) => {
-		allowResize: !isTablet,
-	};
+	const minSize = 300;
+	const maxSize = (previewSize.inlineSize || 1) - 350;
 
 	return isTablet ? (
</file context>
Suggested change
const maxSize = (previewSize.inlineSize || 1) - 350;
const maxSize = Math.max(minSize, (previewSize.inlineSize ?? 0) - 350);


return isTablet ? (
<>
<Display />
<EditorPanel />
</>
) : (
<SplitPane {...splitPaneProps}>
<Display />
<EditorPanel />
<SplitPane resizable={!isTablet}>
<Pane minSize={minSize} maxSize={maxSize}>
<Display />
</Pane>
<Pane minSize={minSize} maxSize={maxSize}>
<EditorPanel />
</Pane>
</SplitPane>
);
};
Expand Down
36 changes: 8 additions & 28 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11089,7 +11089,7 @@ __metadata:
react: "npm:~19.2.7"
react-dom: "npm:~19.2.7"
react-router-dom: "npm:^6.30.4"
react-split-pane: "npm:^0.1.92"
react-split-pane: "npm:^3.2.0"
react-virtuoso: "npm:~4.18.10"
reactflow: "npm:^11.11.4"
typescript: "npm:~5.9.3"
Expand Down Expand Up @@ -31139,7 +31139,7 @@ __metadata:
languageName: node
linkType: hard

"prop-types@npm:^15.5.4, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
Expand Down Expand Up @@ -31828,13 +31828,6 @@ __metadata:
languageName: node
linkType: hard

"react-lifecycles-compat@npm:^3.0.4":
version: 3.0.4
resolution: "react-lifecycles-compat@npm:3.0.4"
checksum: 10/c66b9c98c15cd6b0d0a4402df5f665e8cc7562fb7033c34508865bea51fd7b623f7139b5b7e708515d3cd665f264a6a9403e1fa7e6d61a05759066f5e9f07783
languageName: node
linkType: hard

"react-redux@npm:^9.1.2":
version: 9.2.0
resolution: "react-redux@npm:9.2.0"
Expand Down Expand Up @@ -31878,17 +31871,13 @@ __metadata:
languageName: node
linkType: hard

"react-split-pane@npm:^0.1.92":
version: 0.1.92
resolution: "react-split-pane@npm:0.1.92"
dependencies:
prop-types: "npm:^15.7.2"
react-lifecycles-compat: "npm:^3.0.4"
react-style-proptype: "npm:^3.2.2"
"react-split-pane@npm:^3.2.0":
version: 3.2.0
resolution: "react-split-pane@npm:3.2.0"
peerDependencies:
react: ^16.0.0-0
react-dom: ^16.0.0-0
checksum: 10/d19e841dd494f44b814a1b47832dc7acac0a6d99eb127779209ff2c153a5db4e3fad8cb306284c7db96831b5e482cf11d791fac7e68bf0fd1e35bd567eadcd6a
react: ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10/aa28526f50606470aff6a25ef777be70207a02ee8eec327ede1bc7c91daf4e4aa149240a6801c898092a73b595548cf96bdb2f31229cbf055b94722ddc97b6bd
languageName: node
linkType: hard

Expand Down Expand Up @@ -31970,15 +31959,6 @@ __metadata:
languageName: node
linkType: hard

"react-style-proptype@npm:^3.2.2":
version: 3.2.2
resolution: "react-style-proptype@npm:3.2.2"
dependencies:
prop-types: "npm:^15.5.4"
checksum: 10/c068f10a639f743b311b3a6dd8bdd1b87436ab8d30a10ff4f30840a89decdd2e2eea33a2cefb504274ff58b624680d27f29daefece0f7435cfc8efae070d4e8d
languageName: node
linkType: hard

"react-timing-hooks@npm:~4.0.2":
version: 4.0.2
resolution: "react-timing-hooks@npm:4.0.2"
Expand Down
Loading