Create more realistic containers in DevTools fixture (#34296)
Sebastian "Sebbie" Silbermann committed
Aug 26, 2025 at 17:13 UTC
bb7c9c1b8af82236125418f9fd3aa4de6fcc17e1
2 files changed
+16
-14
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+2
-2
@@ -295,7 +295,7 @@ function SuspenseTab(_: {}) {
295
ref={resizeTreeListRef}>
296
<SuspenseTreeList />
297
</div>
298
- <div className={styles.ResizeBarWrapper}>
298
+ <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
299
<div
300
onPointerDown={onResizeStart}
301
onPointerMove={onResizeTreeList}
@@ -327,7 +327,7 @@ function SuspenseTab(_: {}) {
327
</footer>
328
</div>
329
</div>
330
- <div className={styles.ResizeBarWrapper}>
330
+ <div className={styles.ResizeBarWrapper} hidden={inspectedElementHidden}>
331
<div
332
onPointerDown={onResizeStart}
333
onPointerMove={onResizeTree}
packages/react-devtools-shell/index.html
+14
-12
@@ -8,9 +8,9 @@
8
<style>
9
#panes {
10
display: grid;
11
- height: 100%;
12
- width: 100%;
11
+ gap: 5px;
12
position: relative;
13
+ overflow: hidden;
14
}
15
16
#divider {
@@ -41,21 +41,21 @@
41
height: 100%;
42
width: 100%;
43
border: none;
44
+ overflow-y: auto;
45
}
46
47
#devtools {
48
height: 100%;
49
width: 100%;
49
- overflow: hidden;
50
+ overflow-y: auto;
51
z-index: 10000001;
52
}
53
54
body {
54
- display: flex;
55
height: 100vh;
56
width: 100vw;
57
- contain: strict;
58
- flex-direction: column;
57
+ display: grid;
58
+ grid-template-rows: auto 1fr;
59
margin: 0;
60
padding: 0;
61
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
@@ -128,11 +128,13 @@
128
function setLayout(layoutType, splitRatio) {
129
const panes = document.getElementById('panes');
130
if (layoutType === 'topbottom') {
131
- panes.style.gridTemplateColumns = '100%'; // Full width for each row
132
- panes.style.gridTemplateRows = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;
131
+ panes.style.setProperty('--top-row-height', `${splitRatio * 100}%`);
132
+ panes.style.gridTemplateRows = "var(--top-row-height) 1fr";
133
+ panes.style.gridTemplateColumns = null;
134
} else if (layoutType === 'leftright') {
134
- panes.style.gridTemplateRows = '100%'; // Full height for each column
135
- panes.style.gridTemplateColumns = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;
135
+ panes.style.setProperty('--left-column-width', `${splitRatio * 100}%`);
136
+ panes.style.gridTemplateRows = null;
137
+ panes.style.gridTemplateColumns = "var(--left-column-width) 1fr";
138
}
139
}
140
layout.addEventListener('change', () => {
@@ -147,12 +149,12 @@
149
if (layoutType === 'topbottom') {
150
// For top/bottom layout, divider should be horizontal (spanning across)
151
divider.className = 'horizontal-divider';
150
- divider.style.top = `calc(${splitRatio * 100}% - 2.5px)`;
152
+ divider.style.top = `calc(${splitRatio * 100}%)`;
153
divider.style.left = '0';
154
} else {
155
// For left/right layout, divider should be vertical (spanning down)
156
divider.className = 'vertical-divider';
155
- divider.style.left = `calc(${splitRatio * 100}% - 2.5px)`;
157
+ divider.style.left = `calc(${splitRatio * 100}%)`;
158
divider.style.top = '0';
159
}
160
}