[DevTools] Swap Components tab layout based on container size (#34035)
Sebastian "Sebbie" Silbermann committed
Jul 29, 2025 at 17:23 UTC
9c9136b4415f0288bcff236f488b5961dfb1dd12
3 files changed
+9
-2
packages/react-devtools-shared/src/devtools/views/Components/Components.css
+1
-1
@@ -38,7 +38,7 @@
38
cursor: ew-resize;
39
}
40
41
-@media screen and (max-width: 600px) {
41
+@container devtools (width < 600px) {
42
.Components {
43
flex-direction: column;
44
}
packages/react-devtools-shared/src/devtools/views/DevTools.css
+2
@@ -5,6 +5,8 @@
5
flex-direction: column;
6
background-color: var(--color-background);
7
color: var(--color-text);
8
+ container-name: devtools;
9
+ container-type: inline-size;
10
}
11
12
.TabBar {
packages/react-devtools-shared/src/devtools/views/portaledContent.js
+6
-1
@@ -36,7 +36,12 @@ export default function portaledContent(
36
<ThemeProvider>
37
<div
38
data-react-devtools-portal-root={true}
39
- style={{width: '100vw', height: '100vh'}}>
39
+ style={{
40
+ width: '100vw',
41
+ height: '100vh',
42
+ containerName: 'devtools',
43
+ containerType: 'inline-size',
44
+ }}>
45
{children}
46
</div>
47
</ThemeProvider>