From 06ab52bb6bfcceab77dec7b82b0489916b549d1b Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 17 Jun 2019 19:08:40 +0200
Subject: [PATCH] Fix chart panel auto-open

---
 app/src/components/ChartPanel/index.tsx   | 2 +-
 app/src/components/Layout/ContentView.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/components/ChartPanel/index.tsx b/app/src/components/ChartPanel/index.tsx
index fe15654..7c599c8 100644
--- a/app/src/components/ChartPanel/index.tsx
+++ b/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}
diff --git a/app/src/components/Layout/ContentView.tsx b/app/src/components/Layout/ContentView.tsx
index 6710c0a..46feec7 100644
--- a/app/src/components/Layout/ContentView.tsx
+++ b/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>