[DevTools] Fix inspected element scroll in Suspense tab (#34355)
Sebastian "Sebbie" Silbermann committed
Sep 1, 2025 at 16:40 UTC
b1b0955f2b34286a7408e58463f4cc429627f9a8
3 files changed
+11
-5
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+5
-4
@@ -16,14 +16,15 @@
16
17
.TreeWrapper {
18
border-top: 1px solid var(--color-border);
19
- flex: 1 1 var(--horizontal-resize-tree-percentage);
19
+ flex: 1 1 65%;
20
display: flex;
21
flex-direction: row;
22
height: 100%;
23
+ overflow: auto;
24
}
25
26
.InspectedElementWrapper {
26
- flex: 1 1 35%;
27
+ flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
28
overflow-x: hidden;
29
overflow-y: auto;
30
}
@@ -59,12 +60,12 @@
60
61
.TreeWrapper {
62
border-top: 1px solid var(--color-border);
62
- flex: 1 1 var(--vertical-resize-tree-percentage);
63
+ flex: 1 1 50%;
64
overflow: hidden;
65
}
66
67
.InspectedElementWrapper {
67
- flex: 1 1 50%;
68
+ flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
69
}
70
71
.TreeWrapper + .ResizeBarWrapper .ResizeBar {
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
+5
@@ -9,6 +9,11 @@
9
display: flex;
10
flex-direction: column;
11
flex-grow: 1;
12
+ /*
13
+ * `overflow: auto` will add scrollbars but the input will not actually grow beyond visible content.
14
+ * `overflow: hidden` will constrain the input to its visible content.
15
+ */
16
+ overflow: hidden;
17
}
18
19
.SuspenseTimelineRootSwitcher {
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeList.js
+1
-1
@@ -10,5 +10,5 @@
10
import * as React from 'react';
11
12
export default function SuspenseTreeList(_: {}): React$Node {
13
- return <div>Activity slices</div>;
13
+ return <div>Activity slices not implemented yet</div>;
14
}