5 files changed, 57 insertions, 62 deletions
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 8f9b68b..c8646fb 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -28,7 +28,6 @@ import TextField from "../fields/TextField";
 import Header from "../Header";
 import LinkPopover from "../objects/LinkPopover";
 import "../panels/common.scss";
-import "./common.scss";
 import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss
index 4254547..6ff933c 100644
--- a/frontend/src/components/pages/ConfigurationPage.scss
+++ b/frontend/src/components/pages/ConfigurationPage.scss
@@ -1,6 +1,7 @@
 @import "../../colors";
 
 .configuration-page {
+  height: 100vh;
   background-color: $color-primary-0;
 
   .header-title {
@@ -10,16 +11,10 @@
   .configuration-pane {
     display: flex;
     justify-content: center;
-    height: 100%;
-    padding-top: 100px;
 
     .section-content {
-      background-color: $color-primary-3;
       margin-top: 15px;
-    }
-
-    .section-table table {
-      background-color: red !important;
+      background-color: $color-primary-3;
     }
 
     .section-footer {
@@ -27,4 +22,3 @@
     }
   }
 }
-
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index c4dcd20..3bf8065 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -16,6 +16,8 @@
  */
 
 import React, {Component} from "react";
+import {ReflexContainer, ReflexElement, ReflexSplitter} from "react-reflex";
+import "react-reflex/styles.css"
 import {Route, Switch} from "react-router-dom";
 import Filters from "../dialogs/Filters";
 import Header from "../Header";
@@ -27,12 +29,22 @@ import SearchPane from "../panels/SearchPane";
 import ServicesPane from "../panels/ServicesPane";
 import StreamsPane from "../panels/StreamsPane";
 import Timeline from "../Timeline";
-import "./common.scss";
 import "./MainPage.scss";
 
 class MainPage extends Component {
 
-    state = {};
+    state = {
+        timelineHeight: 210
+    };
+
+    handleTimelineResize = (e) => {
+        if (this.timelineTimeoutHandle) {
+            clearTimeout(this.timelineTimeoutHandle);
+        }
+
+        this.timelineTimeoutHandle = setTimeout(() =>
+            this.setState({timelineHeight: e.domElement.clientHeight}), 100);
+    };
 
     render() {
         let modal;
@@ -41,34 +53,42 @@ class MainPage extends Component {
         }
 
         return (
-            <div className="page main-page">
-                <div className="page-header">
-                    <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/>
+            <ReflexContainer orientation="horizontal" className="page main-page">
+                <div className="fuck-css">
+                    <ReflexElement className="page-header">
+                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/>
+                        {modal}
+                    </ReflexElement>
                 </div>
 
-                <div className="page-content">
-                    <div className="pane connections-pane">
-                        <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
-                    </div>
-                    <div className="pane details-pane">
-                        <Switch>
-                            <Route path="/searches" children={<SearchPane/>}/>
-                            <Route path="/pcaps" children={<PcapsPane/>}/>
-                            <Route path="/rules" children={<RulesPane/>}/>
-                            <Route path="/services" children={<ServicesPane/>}/>
-                            <Route exact path="/connections/:id"
-                                   children={<StreamsPane connection={this.state.selectedConnection}/>}/>
-                            <Route children={<MainPane version={this.props.version}/>}/>
-                        </Switch>
-                    </div>
+                <ReflexElement className="page-content" flex={1}>
+                    <ReflexContainer orientation="vertical" className="page-content">
+                        <ReflexElement className="pane connections-pane">
+                            <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
+                        </ReflexElement>
 
-                    {modal}
-                </div>
+                        <ReflexSplitter/>
 
-                <div className="page-footer">
-                    <Timeline/>
-                </div>
-            </div>
+                        <ReflexElement className="pane details-pane">
+                            <Switch>
+                                <Route path="/searches" children={<SearchPane/>}/>
+                                <Route path="/pcaps" children={<PcapsPane/>}/>
+                                <Route path="/rules" children={<RulesPane/>}/>
+                                <Route path="/services" children={<ServicesPane/>}/>
+                                <Route exact path="/connections/:id"
+                                       children={<StreamsPane connection={this.state.selectedConnection}/>}/>
+                                <Route children={<MainPane version={this.props.version}/>}/>
+                            </Switch>
+                        </ReflexElement>
+                    </ReflexContainer>
+                </ReflexElement>
+
+                <ReflexSplitter propagate={true}/>
+
+                <ReflexElement className="page-footer" onResize={this.handleTimelineResize}>
+                    <Timeline height={this.state.timelineHeight}/>
+                </ReflexElement>
+            </ReflexContainer>
         );
     }
 }
diff --git a/frontend/src/components/pages/MainPage.scss b/frontend/src/components/pages/MainPage.scss
index 4ca54c0..8d1fa96 100644
--- a/frontend/src/components/pages/MainPage.scss
+++ b/frontend/src/components/pages/MainPage.scss
@@ -1,25 +1,23 @@
 @import "../../colors";
 
 .main-page {
+  height: 100vh !important;
+
+  .page-footer {
+    overflow: hidden !important;
+    min-height: 210px;
+  }
+
   .page-content {
-    display: flex;
-    flex: 1;
-    padding: 0 15px;
-    background-color: $color-primary-2;
+    padding: 0 7.5px;
 
     .connections-pane {
-      flex: 1 0;
       margin-right: 7.5px;
     }
 
     .details-pane {
-      position: relative;
-      flex: 1 1;
+      overflow: hidden;
       margin-left: 7.5px;
     }
   }
-
-  .page-footer {
-    flex: 0;
-  }
 }
diff --git a/frontend/src/components/pages/common.scss b/frontend/src/components/pages/common.scss
deleted file mode 100644
index fcf5c20..0000000
--- a/frontend/src/components/pages/common.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.page {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-
-  .page-header,
-  .page-footer {
-    flex: 0;
-  }
-
-  .page-content {
-    overflow: hidden;
-    flex: 1;
-  }
-}