Fix chart panel auto-open

app/src/components/ChartPanel/index.tsx

@@ -73,7 +73,7 @@ function ChartPanel(props: Props) {
   ))
 
   return (
-    <div style={{ width: '100%', height: '100%', padding: '8px' }}>
+    <div style={{ width: '100%', height: '100%', padding: '8px', flex: 1, overflow: 'hidden scroll' }}>
       <Grid container spacing={1}>
         <TransitionGroup component={null} className="example">
           {charts}

app/src/components/Layout/ContentView.tsx

@@ -46,7 +46,7 @@ function ContentView(props: Props) {
         allowResize={true}
         style={{ height: 'calc(100vh - 64px)' }}
         pane1Style={{ maxHeight: '100%' }}
-        pane2Style={{ borderTop: '1px solid #999', overflow: 'hidden scroll' }}
+        pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
         onChange={setHeight}
       >
         <span>
@@ -68,7 +68,9 @@ function ContentView(props: Props) {
             </div>
           </ReactSplitPane>
         </span>
-        <div>
+        {/** Passing height constraints via flex options down */}
+        <div style={{ flex: 1, display: 'flex', height: '100%' }}>
+          {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
           <ReactResizeDetector handleHeight={true} onResize={detectSize} />
           <ChartPanel />
         </div>