[DevTools] Fix inspected element scroll in Suspense tab (facebook#34355)

Author: eps1lon

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

@@ -16,14 +16,15 @@
 
 .TreeWrapper {
   border-top: 1px solid var(--color-border);
-  flex: 1 1 var(--horizontal-resize-tree-percentage);
+  flex: 1 1 65%;
   display: flex;
   flex-direction: row;
   height: 100%;
+  overflow: auto;
 }
 
 .InspectedElementWrapper {
-  flex: 1 1 35%;
+  flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -59,12 +60,12 @@
 
   .TreeWrapper {
     border-top: 1px solid var(--color-border);
-    flex: 1 1 var(--vertical-resize-tree-percentage);
+    flex: 1 1 50%;
     overflow: hidden;
   }
 
   .InspectedElementWrapper {
-    flex: 1 1 50%;
+    flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
   }
 
   .TreeWrapper + .ResizeBarWrapper .ResizeBar {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css

@@ -9,6 +9,11 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  /* 
+   * `overflow: auto` will add scrollbars but the input will not actually grow beyond visible content.
+   * `overflow: hidden` will constrain the input to its visible content.
+   */
+  overflow: hidden;
 }
 
 .SuspenseTimelineRootSwitcher {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeList.js

@@ -10,5 +10,5 @@
 import * as React from 'react';
 
 export default function SuspenseTreeList(_: {}): React$Node {
-  return <div>Activity slices</div>;
+  return <div>Activity slices not implemented yet</div>;
 }