{"files":[{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js","status":"M"},{"path":"packages\/react-devtools-shell\/index.html","status":"M"}],"body":"","parents":["44f8451ede5001b2c31de339890b9160fc06e436"],"commit":{"authorEmail":"sebastian.silbermann@vercel.com","authoredAt":"2025-08-26T17:13:37+02:00","subject":"Create more realistic containers in DevTools fixture (#34296)","authorName":"Sebastian \"Sebbie\" Silbermann","revision":"bb7c9c1b8af82236125418f9fd3aa4de6fcc17e1","shortRevision":"bb7c9c1b8a"},"patch":"diff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\nindex 9df107feab..a65a03efb4 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n@@ -295,7 +295,7 @@ function SuspenseTab(_: {}) {\n ref={resizeTreeListRef}>\n \n <\/div>\n-

\n+

\n \n <\/div>\n <\/div>\n-

\n+

\n \n #panes {\n display: grid;\n- height: 100%;\n- width: 100%;\n+ gap: 5px;\n position: relative;\n+ overflow: hidden;\n }\n \n #divider {\n@@ -41,21 +41,21 @@\n height: 100%;\n width: 100%;\n border: none;\n+ overflow-y: auto;\n }\n \n #devtools {\n height: 100%;\n width: 100%;\n- overflow: hidden;\n+ overflow-y: auto;\n z-index: 10000001;\n }\n \n body {\n- display: flex;\n height: 100vh;\n width: 100vw;\n- contain: strict;\n- flex-direction: column;\n+ display: grid;\n+ grid-template-rows: auto 1fr;\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n@@ -128,11 +128,13 @@\n function setLayout(layoutType, splitRatio) {\n const panes = document.getElementById('panes');\n if (layoutType === 'topbottom') {\n- panes.style.gridTemplateColumns = '100%'; \/\/ Full width for each row\n- panes.style.gridTemplateRows = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;\n+ panes.style.setProperty('--top-row-height', `${splitRatio * 100}%`);\n+ panes.style.gridTemplateRows = \"var(--top-row-height) 1fr\";\n+ panes.style.gridTemplateColumns = null;\n } else if (layoutType === 'leftright') {\n- panes.style.gridTemplateRows = '100%'; \/\/ Full height for each column\n- panes.style.gridTemplateColumns = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;\n+ panes.style.setProperty('--left-column-width', `${splitRatio * 100}%`);\n+ panes.style.gridTemplateRows = null;\n+ panes.style.gridTemplateColumns = \"var(--left-column-width) 1fr\";\n }\n }\n layout.addEventListener('change', () => {\n@@ -147,12 +149,12 @@\n if (layoutType === 'topbottom') {\n \/\/ For top\/bottom layout, divider should be horizontal (spanning across)\n divider.className = 'horizontal-divider';\n- divider.style.top = `calc(${splitRatio * 100}% - 2.5px)`;\n+ divider.style.top = `calc(${splitRatio * 100}%)`;\n divider.style.left = '0';\n } else {\n \/\/ For left\/right layout, divider should be vertical (spanning down)\n divider.className = 'vertical-divider';\n- divider.style.left = `calc(${splitRatio * 100}% - 2.5px)`;\n+ divider.style.left = `calc(${splitRatio * 100}%)`;\n divider.style.top = '0';\n }\n }\n"}

dillon1000/react

Files changed