[DevTools] Swap Components tab layout based on container size

This is mostly relevant for using React DevTools inline where the devtools container width is not equal to the viewport width (e.g. in the test fixture).

Container queries are available in all evergreen browsers and iOS 16

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/Components.css

@@ -38,7 +38,7 @@
   cursor: ew-resize;
 }
 
-@media screen and (max-width: 600px) {
+@container devtools (width < 600px) {
   .Components {
     flex-direction: column;
   }

packages/react-devtools-shared/src/devtools/views/DevTools.css

@@ -5,6 +5,8 @@
   flex-direction: column;
   background-color: var(--color-background);
   color: var(--color-text);
+  container-name: devtools;
+  container-type: inline-size;
 }
 
 .TabBar {

packages/react-devtools-shared/src/devtools/views/portaledContent.js

@@ -36,7 +36,12 @@ export default function portaledContent(
         <ThemeProvider>
           <div
             data-react-devtools-portal-root={true}
-            style={{width: '100vw', height: '100vh'}}>
+            style={{
+              width: '100vw',
+              height: '100vh',
+              containerName: 'devtools',
+              containerType: 'inline-size',
+            }}>
             {children}
           </div>
         </ThemeProvider>