[DevTools] Better scrolling in Suspense tab (#34299)
Sebastian "Sebbie" Silbermann committed
Aug 27, 2025 at 16:00 UTC
213594860f456850bd615fcf08c0f0da25a998c5
1 file changed
+11
-9
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+11
-9
@@ -15,15 +15,15 @@
15
}
16
17
.TreeWrapper {
18
+ border-top: 1px solid var(--color-border);
19
flex: 1 1 var(--horizontal-resize-tree-percentage);
20
display: flex;
21
flex-direction: row;
21
- overflow: auto;
22
- border-top: 1px solid var(--color-border);
22
+ height: 100%;
23
}
24
25
.InspectedElementWrapper {
26
- flex: 1 1 calc(100% - var(--horizontal-resize-tree-percentage));
26
+ flex: 1 1 35%;
27
overflow-x: hidden;
28
overflow-y: auto;
29
}
@@ -52,8 +52,6 @@
52
display: none;
53
}
54
55
-
56
-
55
@container devtools (width < 600px) {
56
.SuspenseTab {
57
flex-direction: column;
@@ -61,7 +59,8 @@
59
60
.TreeWrapper {
61
border-top: 1px solid var(--color-border);
64
- flex: 1 0 var(--vertical-resize-tree-percentage);
62
+ flex: 1 1 var(--vertical-resize-tree-percentage);
63
+ overflow: hidden;
64
}
65
66
.InspectedElementWrapper {
@@ -79,6 +78,7 @@
78
.TreeView footer {
79
display: flex;
80
justify-content: end;
81
+ border-top: 1px solid var(--color-border);
82
}
83
84
.ToggleInspectedElement[data-orientation="horizontal"] {
@@ -89,21 +89,23 @@
89
.TreeList {
90
flex: 0 0 var(--horizontal-resize-tree-list-percentage);
91
border-right: 1px solid var(--color-border);
92
- padding: 0.25rem
92
+ padding: 0.25rem;
93
+ overflow: auto;
94
}
95
96
.TreeView {
97
flex: 1 1 35%;
98
display: flex;
99
flex-direction: column;
100
+ height: 100%;
101
+ overflow: auto;
102
}
103
101
-
102
-
104
.Rects {
105
border-top: 1px solid var(--color-border);
106
padding: 0.25rem;
107
flex-grow: 1;
108
+ overflow: auto;
109
}
110
111
.TimelineWrapper {