From c447baf5aea31cef13daf0843c7f8e666e0affc1 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 14:26:38 -0500
Subject: [PATCH 01/24] sidebar collapse button

---
 src/app/help/index.jade                       |  2 +-
 src/app/help/index.less                       |  6 ++--
 src/app/styles/index.less                     |  2 +-
 .../home/lib/components/home.jsx              | 18 ++++++++++--
 .../sidebar/lib/components/index.jsx          |  6 +++-
 .../sidebar/lib/components/sidebar.jsx        | 22 ++++++++++++++-
 .../sidebar/styles/index.less                 | 28 +++++++++++++++++++
 7 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/app/help/index.jade b/src/app/help/index.jade
index 1e9d51944b5..1df5bf2cd58 100644
--- a/src/app/help/index.jade
+++ b/src/app/help/index.jade
@@ -1,5 +1,5 @@
 .page.help
   div(data-hook='sidebar-subview')
-  .content.with-sidebar
+  .content-sidebar-expanded
     h1.help-entry-title(data-hook='help-entry-title')
     .help-entry(data-hook='help-entry-content')
diff --git a/src/app/help/index.less b/src/app/help/index.less
index 7ec9551ff2d..b4feb8b9bae 100644
--- a/src/app/help/index.less
+++ b/src/app/help/index.less
@@ -1,8 +1,10 @@
 .page.help  {
   .container-fluid;
 
-  .content.with-sidebar {
-    padding: 0 15px 15px 15px;
+  .content {
+    &-sidebar-expanded {
+        padding: 0 15px 15px 15px;
+    }
   }
   .related {
     margin-top: 20px;
diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index a27fcadda37..9dc9d5f8def 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -29,7 +29,7 @@ html, body {
     max-height: 100%;
     overflow-y: auto;
 
-    &.with-sidebar {
+    &-sidebar-expanded {
       margin-left: @sidebar-width;
     }
   }
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index dbcbe523261..90bd8638c58 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -5,6 +5,7 @@ const ReactTooltip = require('react-tooltip');
 class Home extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { collapsed: false };
     this.sideBar = app.appRegistry.getComponent('Sidebar.Component');
     this.collectionView = app.appRegistry.getComponent('Collection.Collection');
     this.collectionsTable = app.appRegistry.getComponent('Database.CollectionsTable');
@@ -14,6 +15,19 @@ class Home extends React.Component {
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
   }
 
+  collapseSidebar() {
+    // console.log("COLLAPSE!!!!!");
+    // console.log("COLLAPSE!!!!!");
+    // console.log("COLLAPSE!!!!!");
+    console.log(this.state.collapsed);
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  getContentClasses() {
+    return 'content' +
+      (this.state.collapsed ? ' content-sidebar-collapsed' : ' content-sidebar-expanded');
+  }
+
   renderContent() {
     let view;
     switch (this.props.mode) {
@@ -44,11 +58,11 @@ class Home extends React.Component {
 
     return (
       <div className="page">
-        <div className="content with-sidebar">
+        <div className={this.getContentClasses()}>
           {this.renderContent()}
         </div>
         <div className="compass-sidebar-container">
-          <this.sideBar />
+          <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
         </div>
         {isNotWritableTooltip}
       </div>
diff --git a/src/internal-packages/sidebar/lib/components/index.jsx b/src/internal-packages/sidebar/lib/components/index.jsx
index a71dab94bb3..5608b4c47bf 100644
--- a/src/internal-packages/sidebar/lib/components/index.jsx
+++ b/src/internal-packages/sidebar/lib/components/index.jsx
@@ -16,12 +16,16 @@ class ConnectedSidebar extends React.Component {
   render() {
     return (
       <StoreConnector store={SidebarStore}>
-        <Sidebar />
+        <Sidebar onCollapse={this.props.onCollapse.bind(this)}/>
       </StoreConnector>
     );
   }
 }
 
+ConnectedSidebar.propTypes = {
+  onCollapse: React.PropTypes.func
+};
+
 ConnectedSidebar.displayName = 'ConnectedSidbar';
 
 module.exports = ConnectedSidebar;
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index ebb080e8ecb..2cf917a6447 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -11,6 +11,21 @@ const SidebarInstanceProperties = require('./sidebar-instance-properties');
 
 
 class Sidebar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { collapsed: false };
+  }
+
+  getSidebarClasses() {
+    return 'compass-sidebar' +
+      (this.state.collapsed ? ' compass-sidebar-collapsed' : '');
+  }
+
+  handleCollapse() {
+    // console.log(this.state.collapsed);
+    this.props.onCollapse();
+    this.setState({ collapsed: !this.state.collapsed });
+  }
 
   handleFilter(event) {
     const searchString = event.target.value;
@@ -27,7 +42,11 @@ class Sidebar extends React.Component {
 
   render() {
     return (
-      <div className="compass-sidebar" data-test-id="instance-sidebar">
+      <div className={this.getSidebarClasses()} data-test-id="instance-sidebar">
+        <div
+          className="compass-sidebar-toggle" onClick={this.handleCollapse.bind(this)}>
+          <i className="fa fa-backward"></i>
+        </div>
         <StoreConnector store={InstanceStore}>
           <SidebarInstanceProperties
             connection={app.connection}
@@ -60,6 +79,7 @@ class Sidebar extends React.Component {
 Sidebar.propTypes = {
   instance: React.PropTypes.object,
   databases: React.PropTypes.array,
+  onCollapse: React.PropTypes.func,
   activeNamespace: React.PropTypes.string
 };
 
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index af4aabaa50f..33a04979b8f 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -3,6 +3,7 @@
   left: 0;
   top: 0;
   bottom: 0;
+  z-index: 4;
 }
 
 .compass-sidebar {
@@ -13,6 +14,7 @@
   width: 250px;
   background: #4c5259;
   color: #bfbfbe;
+  transition: all 180ms ease-out;
 
   &-content {
     overflow-y: scroll;
@@ -22,6 +24,18 @@
     height: ~"calc(100% - 112px)";
   }
 
+  &-toggle {
+    background: #343B43;
+    height: 12px;
+    line-height: 11px;
+    padding-right: 3px;
+    text-align: right;
+    i {
+      line-height: 11px;
+      font-size: 10px;
+    }
+  }
+
   &-title {
     white-space: nowrap;
     overflow-x: hidden;
@@ -279,3 +293,17 @@
     }
   }
 }
+
+.compass-sidebar-collapsed {
+  width: 36px;
+  overflow: hidden;
+
+  .compass-sidebar {
+    &-content,
+    &-property-column,
+    &-instance-hostname,
+    &-instance-version {
+      display: none;
+    }
+  }
+}

From a8a17f3f4e7f0c79dc39239d16a1b82562d2a088 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 14:44:51 -0500
Subject: [PATCH 02/24] remove position:fixed

---
 src/app/styles/index.less                                 | 4 ----
 src/internal-packages/collection/styles/index.less        | 2 --
 src/internal-packages/home/lib/components/home.jsx        | 8 +-------
 src/internal-packages/home/styles/index.less              | 3 ---
 src/internal-packages/server-stats/styles/rt-nav.less     | 5 -----
 .../server-stats/styles/rtss-databases.less               | 5 -----
 src/internal-packages/sidebar/lib/components/sidebar.jsx  | 2 +-
 src/internal-packages/sidebar/styles/index.less           | 8 --------
 8 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 9dc9d5f8def..ed384714f64 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -104,10 +104,6 @@ i.syntax-help {
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  left: 250px;
-  right: 0;
-  z-index: 4;
 }
 
   .rtss-databases,
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 8a188e2923a..badd8fa7deb 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -1,8 +1,6 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index 90bd8638c58..39c58d53edc 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -16,10 +16,6 @@ class Home extends React.Component {
   }
 
   collapseSidebar() {
-    // console.log("COLLAPSE!!!!!");
-    // console.log("COLLAPSE!!!!!");
-    // console.log("COLLAPSE!!!!!");
-    console.log(this.state.collapsed);
     this.setState({ collapsed: !this.state.collapsed });
   }
 
@@ -61,9 +57,7 @@ class Home extends React.Component {
         <div className={this.getContentClasses()}>
           {this.renderContent()}
         </div>
-        <div className="compass-sidebar-container">
-          <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
-        </div>
+        <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
         {isNotWritableTooltip}
       </div>
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index e65388b407f..80391f0475a 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -47,10 +47,7 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
-    width: ~"calc(100% - 250px)";
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/server-stats/styles/rt-nav.less b/src/internal-packages/server-stats/styles/rt-nav.less
index 40de6bb7e07..cb2b333c7d3 100644
--- a/src/internal-packages/server-stats/styles/rt-nav.less
+++ b/src/internal-packages/server-stats/styles/rt-nav.less
@@ -4,11 +4,6 @@
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  top: 46px;
-  left: 250px;
-  right: 0;
-  z-index: 1;
 }
 
 .time,
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index 16f98c2febf..a095706b1c6 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -18,11 +18,6 @@
     border-bottom: 1px solid @gray7;
     padding-top: 4px;
     padding-left: 20px;
-    position: fixed;
-    top: 46px;
-    left: 250px;
-    right: 0;
-    z-index: 1;
   }
 }
 
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index 2cf917a6447..dffadb3aaa2 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -18,7 +18,7 @@ class Sidebar extends React.Component {
 
   getSidebarClasses() {
     return 'compass-sidebar' +
-      (this.state.collapsed ? ' compass-sidebar-collapsed' : '');
+      (this.state.collapsed ? ' compass-sidebar-collapsed' : ' compass-sidebar-expanded');
   }
 
   handleCollapse() {
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index 33a04979b8f..1c3735843eb 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,11 +1,3 @@
-.compass-sidebar-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
 .compass-sidebar {
   margin: 0;
   position: absolute;

From 55003f8e460a56e184bcdb4d51c0072888f91a27 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 15:09:02 -0500
Subject: [PATCH 03/24] removed all positioning on main content containers

---
 src/app/styles/index.less                     | 28 ------------
 .../app/styles/tab-nav-bar.less               | 45 -------------------
 .../collection/styles/index.less              | 33 --------------
 .../crud/lib/component/document-list.jsx      |  2 +-
 .../database/styles/collections-table.less    |  5 ---
 .../lib/components/compass-explain.jsx        |  2 +-
 src/internal-packages/home/styles/index.less  | 33 --------------
 .../indexes/lib/component/indexes.jsx         |  2 +-
 .../indexes/styles/index.less                 |  2 +-
 src/internal-packages/query/styles/index.less |  4 +-
 .../schema/lib/component/index.jsx            |  2 +-
 .../server-stats/styles/rt-lists.less         |  5 ---
 .../server-stats/styles/rtss-databases.less   |  6 ---
 .../validation/lib/components/validation.jsx  |  2 +-
 14 files changed, 7 insertions(+), 164 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index ed384714f64..4f34dd4da57 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -18,20 +18,11 @@ html, body {
 }
 
 #application {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
 
   .content {
     height: 100%;
     max-height: 100%;
-    overflow-y: auto;
 
-    &-sidebar-expanded {
-      margin-left: @sidebar-width;
-    }
   }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
@@ -105,22 +96,3 @@ i.syntax-help {
   padding-top: 4px;
   padding-left: 20px;
 }
-
-  .rtss-databases,
-  .collections {
-    .action-bar {
-      top: 46px;
-    }
-  }
-
-  .validation {
-    .action-bar {
-      top: 96px;
-    }
-  }
-
-  .column.main {
-      .action-bar {
-        position: static;
-      }
-  }
diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index 49bd763e679..a9eeae11142 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -66,49 +66,4 @@
     cursor: default;
     border-color: @chart1;
   }
-  //shouldn't positioning of the component happen when it's rendered by its parent?
-  &-is-light-theme {
-    .tab-nav-bar-header {
-      top: 50px;
-      height: 46px;
-      z-index: 2;
-      border-bottom: 1px solid #ebebed;
-    }
-  }
-
-  &-is-dark-theme {
-    .tab-nav-bar-header {
-      background-color: #2B3033;
-    }
-
-    .tab-nav-bar-tab {
-      color: #8B8D8F;
-    }
-
-    .tab-nav-bar-link {
-      color: @pw;
-    }
-
-    .tab-nav-bar-is-selected {
-      color: @pw;
-      background-color: #3D4247;
-      border-color: #545454;
-
-      &.tab-nav-bar-tab:hover {
-        background-color: #3D4247;
-      }
-    }
-
-    .tab-nav-bar-tab:hover {
-      background-color: #2B3033;
-      border-color: #545454;
-      border-bottom: none;
-
-      color: @pw;
-
-      .tab-nav-bar-link {
-        color: @pw;
-      }
-    }
-  }
 }
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index badd8fa7deb..554ed1cd8b2 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -17,10 +17,6 @@
     }
   }
 
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
   .column {
     overflow: auto;
     height: auto;
@@ -33,36 +29,7 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    overflow-x: hidden;
     background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
-  }
-
-  .column-container {
-    &.with-message {
-      .main {
-        top: 128px;
-      }
-    }
-    &.with-refinebar {
-      .main {
-        top: 149px;
-      }
-    }
-    &.with-refinebar-and-message {
-      .main {
-        top: 181px;
-      }
-    }
-    &.with-refinebar-and-2xmessage {
-      .main {
-        top: 214px;
-      }
-    }
   }
 
   .side {
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index cfe63e75321..dcecc31801a 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -257,7 +257,7 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents header-margin">
+      <div className="compass-documents">
         <this.queryBar />
         <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
           insertHandler={this.handleOpenInsert.bind(this)} />
diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
index ac5ab687f30..4a7e6b17f99 100644
--- a/src/internal-packages/database/styles/collections-table.less
+++ b/src/internal-packages/database/styles/collections-table.less
@@ -2,11 +2,6 @@
   background-color: @gray8;
   overflow-y: scroll;
   padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index cf0260711ec..732c4f64bc5 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -83,7 +83,7 @@ class CompassExplain extends React.Component {
     }
 
     return (
-      <div className="compass-explain header-margin">
+      <div className="compass-explain">
         <this.queryBar />
         {content}
       </div>
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 80391f0475a..3bedf8cc40c 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -74,10 +74,6 @@
     }
   }
 
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
   .column {
     overflow: auto;
     height: auto;
@@ -90,38 +86,9 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    overflow-x: hidden;
     background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
   }
 
-    .column-container {
-      &.with-message {
-        .main {
-          top: 128px;
-        }
-      }
-      &.with-refinebar {
-        .main {
-          top: 149px;
-        }
-      }
-      &.with-refinebar-and-message {
-        .main {
-          top: 181px;
-        }
-      }
-      &.with-refinebar-and-2xmessage {
-        .main {
-          top: 214px;
-        }
-      }
-    }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index 0960c8aebf4..c3ed13c5528 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -81,7 +81,7 @@ class Indexes extends React.Component {
    */
   render() {
     return (
-      <div className="index-container header-margin">
+      <div className="index-container">
         {this.state.readonly ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index 862ecfa18ca..98c78524bd1 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/src/internal-packages/indexes/styles/index.less
@@ -22,7 +22,7 @@
 
   .column-container {
     .column.main {
-      margin-top: 32px;
+
     }
   }
 
diff --git a/src/internal-packages/query/styles/index.less b/src/internal-packages/query/styles/index.less
index 5ebaf201b8a..f316d688df2 100644
--- a/src/internal-packages/query/styles/index.less
+++ b/src/internal-packages/query/styles/index.less
@@ -1,6 +1,4 @@
 .refine-view-container {
-  position: relative;
-  z-index: 1;
 
   .query-input-container {
     padding: 12px 10px 12px;
@@ -52,7 +50,7 @@
     font-size: 11px;
     padding: 2px 4px !important;
   }
-  
+
   .message-container {
     background: @gray7;
   }
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 83600d0c839..843fc36075b 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,7 +93,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div className="header-margin">
+      <div>
         <this.queryBar />
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
         <div className="column-container with-refinebar-and-message">
diff --git a/src/internal-packages/server-stats/styles/rt-lists.less b/src/internal-packages/server-stats/styles/rt-lists.less
index c7b6f4cbc56..592d8f6cb7c 100644
--- a/src/internal-packages/server-stats/styles/rt-lists.less
+++ b/src/internal-packages/server-stats/styles/rt-lists.less
@@ -6,11 +6,6 @@
   height: auto;
   overflow: scroll;
   padding-bottom: 100px;
-  position: absolute;
-  top: 88px;
-  right: 10px;
-  bottom: 10px;
-  left: 260px;
 }
 
 .rt__lists-out {
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index a095706b1c6..4f43147dac1 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -1,12 +1,6 @@
 .rtss-databases {
   background-color: @gray8;
-  overflow-y: scroll;
   padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 043c4e98687..ce2dea836b5 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -89,7 +89,7 @@ class Validation extends React.Component {
 
   render() {
     return (
-      <div className="validation header-margin">
+      <div className="validation">
         <div className="column-container with-message">
           {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
         </div>

From 40ef9ef187689fb1f0129d150d14719aa15af383 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 15:33:00 -0500
Subject: [PATCH 04/24] basic flexbox for content and sidebar

---
 src/app/styles/index.less                      | 11 +++++++++--
 src/internal-packages/home/styles/index.less   | 18 +++++++++++-------
 .../sidebar/styles/index.less                  | 17 +++++++++++------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 4f34dd4da57..ac7880b41e1 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -20,8 +20,15 @@ html, body {
 #application {
 
   .content {
-    height: 100%;
-    max-height: 100%;
+
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 914px;
+    order: 2;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: stretch;
+
 
   }
   #statusbar {
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 3bedf8cc40c..33f34c81564 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -1,8 +1,8 @@
 .page {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
 }
 
 .badge {
@@ -24,9 +24,13 @@
 }
 
 .content {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 914px;
+  order: 2;
+  // display: flex;
+  // flex-direction: column;
+  // align-items: stretch;
 }
 
 .panel-title {
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index 1c3735843eb..bb906f6b11c 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,12 +1,19 @@
 .compass-sidebar {
   margin: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 250px;
+
   background: #4c5259;
   color: #bfbfbe;
   transition: all 180ms ease-out;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  &-expanded {
+    flex-basis: 286px;
+  }
+
+  &-collapsed {
+    flex-basis: 36px;
+  }
 
   &-content {
     overflow-y: scroll;
@@ -287,9 +294,7 @@
 }
 
 .compass-sidebar-collapsed {
-  width: 36px;
   overflow: hidden;
-
   .compass-sidebar {
     &-content,
     &-property-column,

From a82673d49e011fc56b3257b1cc8aa413367972b8 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 16:38:01 -0500
Subject: [PATCH 05/24] removed old styles, removed classes intended to add
 positioning for content on column-container

---
 .../collection/styles/index.less              | 43 ------------------
 .../crud/lib/component/document-list.jsx      |  2 +-
 .../lib/components/compass-explain.jsx        |  2 +-
 src/internal-packages/home/styles/index.less  | 44 -------------------
 .../indexes/styles/index.less                 |  6 ---
 .../schema/lib/component/index.jsx            |  2 +-
 .../validation/lib/components/validation.jsx  |  2 +-
 7 files changed, 4 insertions(+), 97 deletions(-)

diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 554ed1cd8b2..1068de53cfc 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -11,11 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
 
   .column {
     overflow: auto;
@@ -41,42 +36,4 @@
     top: 30px;
   }
 
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index dcecc31801a..64a3b61a0a5 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -239,7 +239,7 @@ class DocumentList extends React.Component {
       );
     }
     return (
-      <div className="column-container with-refinebar-and-2xmessage">
+      <div className="column-container">
         <div className="column main">
           <ol className={LIST_CLASS} ref={(c) => this._node = c}>
             {this.state.docs}
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index 732c4f64bc5..e5647b35d9e 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -45,7 +45,7 @@ class CompassExplain extends React.Component {
 
   renderContent() {
     return (
-      <div className="column-container with-refinebar">
+      <div className="column-container">
         <div className="column main">
           <ExplainHeader
             viewType={this.props.viewType}
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 33f34c81564..f2e631702ba 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -72,11 +72,6 @@
       margin-left: 2px;
     }
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
 
   .column {
     overflow: auto;
@@ -101,45 +96,6 @@
     right: -12px;
     top: 30px;
   }
-
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
 
 .sidebar {
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index 98c78524bd1..e6142d98eb4 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/src/internal-packages/indexes/styles/index.less
@@ -20,12 +20,6 @@
 
 .index-container {
 
-  .column-container {
-    .column.main {
-
-    }
-  }
-
   table {
     table-layout: auto;
     border-collapse: collapse;
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 843fc36075b..73324ac41cd 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -96,7 +96,7 @@ const Schema = React.createClass({
       <div>
         <this.queryBar />
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
-        <div className="column-container with-refinebar-and-message">
+        <div className="column-container">
           <div className="column main">
             <div className="schema-field-list">
               {fieldList}
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index ce2dea836b5..7664cbadbe0 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -90,7 +90,7 @@ class Validation extends React.Component {
   render() {
     return (
       <div className="validation">
-        <div className="column-container with-message">
+        <div className="column-container">
           {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
         </div>
       </div>

From df50d4c2e8837d0b79430fd3a9db715161d50812 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Fri, 13 Jan 2017 16:18:03 -0500
Subject: [PATCH 06/24] more cleanup

---
 src/app/styles/index.less                      | 12 ------------
 .../collection/styles/index.less               | 16 ----------------
 .../crud/lib/component/document-list.jsx       |  8 +++++---
 src/internal-packages/home/styles/index.less   | 18 ------------------
 .../schema/lib/component/index.jsx             |  8 +++++---
 5 files changed, 10 insertions(+), 52 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index ac7880b41e1..1f6f4713b81 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -19,18 +19,6 @@ html, body {
 
 #application {
 
-  .content {
-
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: 914px;
-    order: 2;
-    // display: flex;
-    // flex-direction: column;
-    // align-items: stretch;
-
-
-  }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
     position: fixed;
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 1068de53cfc..6048746f61b 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -11,22 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    background-color: @gray8;
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 64a3b61a0a5..3dc4d58173f 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -258,9 +258,11 @@ class DocumentList extends React.Component {
   render() {
     return (
       <div className="compass-documents">
-        <this.queryBar />
-        <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
-          insertHandler={this.handleOpenInsert.bind(this)} />
+        <div>
+          <this.queryBar />
+          <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
+            insertHandler={this.handleOpenInsert.bind(this)} />
+        </div>
         {this.renderContent()}
       </div>
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index f2e631702ba..30131f9d6f7 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -28,9 +28,6 @@
   flex-shrink: 0;
   flex-basis: 914px;
   order: 2;
-  // display: flex;
-  // flex-direction: column;
-  // align-items: stretch;
 }
 
 .panel-title {
@@ -73,21 +70,6 @@
     }
   }
 
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    background-color: @gray8;
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 73324ac41cd..f541f2ed95f 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,9 +93,11 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div>
-        <this.queryBar />
-        <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
+      <div className="schema-container">
+        <div className="controls-container">
+          <this.queryBar />
+          <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
+        </div>
         <div className="column-container">
           <div className="column main">
             <div className="schema-field-list">

From 89d1d853a2a1e8b15dead93034ee4e70b197f10b Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Sun, 15 Jan 2017 23:12:06 -0500
Subject: [PATCH 07/24] indexes, explain and validation tab flexbox

---
 .../app/styles/tab-nav-bar.less               | 16 +++++-
 .../crud/lib/component/document-list.jsx      |  4 +-
 .../explain/styles/explain-body.less          | 12 ++--
 src/internal-packages/home/styles/index.less  | 56 ++++++++++++++++++-
 .../indexes/lib/component/indexes.jsx         |  5 +-
 .../schema/lib/component/index.jsx            |  2 +-
 .../validation/lib/components/validation.jsx  | 31 +++++-----
 7 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index a9eeae11142..b0861ee067f 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -1,9 +1,23 @@
 .tab-nav-bar {
 
+  &-is-light-theme {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   &-header {
-    height: 45px;
     background-color: @pw;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 45px;
+
     display: flex;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
     position: relative;
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 3dc4d58173f..2f508399061 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -257,8 +257,8 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents">
-        <div>
+      <div className="content-container content-container-documents compass-documents">
+        <div className="controls-container">
           <this.queryBar />
           <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
             insertHandler={this.handleOpenInsert.bind(this)} />
diff --git a/src/internal-packages/explain/styles/explain-body.less b/src/internal-packages/explain/styles/explain-body.less
index f6ffa1790fd..29c4190a3be 100644
--- a/src/internal-packages/explain/styles/explain-body.less
+++ b/src/internal-packages/explain/styles/explain-body.less
@@ -1,9 +1,9 @@
 .explain-body {
   background: @gray8;
-  position: absolute;
-  top: 215px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  overflow-y: scroll;
+  // position: absolute;
+  // top: 215px;
+  // left: 0px;
+  // right: 0px;
+  // bottom: 0px;
+  // overflow-y: scroll;
 }
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 30131f9d6f7..0db8595aae9 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  height: 100%;
+  height: 100vh;
 }
 
 .badge {
@@ -45,10 +45,64 @@
   flex-direction: row;
 }
 
+  .tab-views {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+  }
+
+    .tab {
+      display: flex;
+      width: 100%;
+    }
+
+    .schema-container,
+    .compass-documents,
+    .index-container,
+    .compass-explain,
+    .validation-container {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+            .controls-container {
+              flex-grow: 0;
+              flex-shrink: 0;
+              flex-basis: auto;
+            }
+
+            .column-container {
+              flex-grow: 1;
+              flex-shrink: 1;
+              flex-basis: auto;
+
+              flex-direction: column;
+              display: flex;
+              overflow: auto;
+              // box-shadow: inset 0 5px 3px rgba(0,0,0,.2);
+              background: @gray8;
+            }
+
+                    .column.main {
+                      flex: 1;
+                      margin-bottom: 100px;
+                      padding: 0 24px;
+                    }
+
 .collection-view {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
   header {
     padding: 12px 0 0;
     background: @pw;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 67px;
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index c3ed13c5528..436cd6669a3 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -55,7 +55,6 @@ class Indexes extends React.Component {
   renderComponent() {
     return (
       <div className="column-container">
-        <CreateIndexButton isWritable={this.state.writable} />
         <div className="column main">
           <table data-test-id="indexes-table">
             <IndexHeader />
@@ -82,6 +81,10 @@ class Indexes extends React.Component {
   render() {
     return (
       <div className="index-container">
+        {/* NOT SURE if we need to wrap the controls-container in a readonly conditional as well. */}
+        <div className="controls-container">
+          <CreateIndexButton isWritable={this.state.writable} />
+        </div>
         {this.state.readonly ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index f541f2ed95f..576b06ad7b1 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,7 +93,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div className="schema-container">
+      <div className="content-container content-container-schema schema-container">
         <div className="controls-container">
           <this.queryBar />
           <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 7664cbadbe0..26465b9d557 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -58,20 +58,8 @@ class Validation extends React.Component {
         />
       );
 
-    const activeButton = this.props.isExpressibleByRules ?
-      this.props.viewMode : 'JSON';
-
     return (
-      <div>
-        <ValidationStatusRow>
-          <ViewSwitcher
-            label="View as:"
-            buttonLabels={['Rule Builder', 'JSON']}
-            activeButton={activeButton}
-            onClick={this.switchView.bind(this)}
-            disabled={!this.props.isExpressibleByRules}
-          />
-        </ValidationStatusRow>
+      <div className="column-container">
         <div className="column main">
           {view}
         </div>
@@ -88,11 +76,22 @@ class Validation extends React.Component {
   }
 
   render() {
+    const activeButton = this.props.isExpressibleByRules ?
+      this.props.viewMode : 'JSON';
     return (
-      <div className="validation">
-        <div className="column-container">
-          {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
+      <div className="validation-container">
+        <div className="controls-container">
+          <ValidationStatusRow>
+            <ViewSwitcher
+              label="View as:"
+              buttonLabels={['Rule Builder', 'JSON']}
+              activeButton={activeButton}
+              onClick={this.switchView.bind(this)}
+              disabled={!this.props.isExpressibleByRules}
+            />
+          </ValidationStatusRow>
         </div>
+        {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
   }

From d05ae79a4bbbf1b43591f54c8fa28cbd5bfaf1a6 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 00:17:07 -0500
Subject: [PATCH 08/24] collections table, databases table, RTSS view flexbox
 support

---
 .../app/styles/tab-nav-bar.less               |  2 -
 .../lib/components/collections-table.jsx      | 30 ++++---
 .../database/styles/collections-table.less    |  2 -
 src/internal-packages/home/styles/index.less  | 86 ++++++++++---------
 .../lib/component/databases-table.jsx         | 30 ++++---
 .../lib/component/performance-component.jsx   | 22 +++--
 .../server-stats/styles/rt-lists.less         | 10 ++-
 .../server-stats/styles/rtss-databases.less   |  1 -
 8 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index b0861ee067f..5325367d332 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -11,11 +11,9 @@
 
   &-header {
     background-color: @pw;
-
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 45px;
-
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
diff --git a/src/internal-packages/database/lib/components/collections-table.jsx b/src/internal-packages/database/lib/components/collections-table.jsx
index 239f2a824ac..c3b4f548963 100644
--- a/src/internal-packages/database/lib/components/collections-table.jsx
+++ b/src/internal-packages/database/lib/components/collections-table.jsx
@@ -66,7 +66,7 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table" data-test-id="collections-table">
-        <div className="collections-table-create-button action-bar">
+        <div className="collections-table-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -78,18 +78,22 @@ class CollectionsTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         <CreateCollectionDialog />
         <DropCollectionDialog />
       </div>
diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
index 4a7e6b17f99..abee847467e 100644
--- a/src/internal-packages/database/styles/collections-table.less
+++ b/src/internal-packages/database/styles/collections-table.less
@@ -1,7 +1,5 @@
 .collections-table {
   background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 0db8595aae9..d9c691de760 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -45,53 +45,62 @@
   flex-direction: row;
 }
 
-  .tab-views {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
+/*
+GLOBAL FLEXBOX LAYOUT STYLES
+*/
+.tab-views {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+}
+
+  .tab {
     display: flex;
+    width: 100%;
   }
 
-    .tab {
-      display: flex;
-      width: 100%;
+  .rtss-databases,
+  .rt-perf, //rtss charts
+  .collections-table,
+  //collection views
+  .schema-container,
+  .compass-documents,
+  .index-container,
+  .compass-explain,
+  .validation-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+    .controls-container {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+      box-shadow: 0 1px 2px rgba(0,0,0,.2);
+      z-index: 1;
     }
 
-    .schema-container,
-    .compass-documents,
-    .index-container,
-    .compass-explain,
-    .validation-container {
-      display: flex;
+    .column-container {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
       flex-direction: column;
-      align-items: stretch;
-      width: 100%;
+      display: flex;
+      overflow: auto;
+      background: @gray8;
     }
 
-            .controls-container {
-              flex-grow: 0;
-              flex-shrink: 0;
-              flex-basis: auto;
-            }
-
-            .column-container {
-              flex-grow: 1;
-              flex-shrink: 1;
-              flex-basis: auto;
-
-              flex-direction: column;
-              display: flex;
-              overflow: auto;
-              // box-shadow: inset 0 5px 3px rgba(0,0,0,.2);
-              background: @gray8;
-            }
-
-                    .column.main {
-                      flex: 1;
-                      margin-bottom: 100px;
-                      padding: 0 24px;
-                    }
+      .column.main {
+        flex: 1;
+        margin-bottom: 100px;
+        padding: 0 24px;
+      }
 
+.RTSS, //databases table
+.collections, // collections table
 .collection-view {
   display: flex;
   flex-direction: column;
@@ -99,7 +108,6 @@
   height: 100%;
   header {
     padding: 12px 0 0;
-    background: @pw;
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 67px;
diff --git a/src/internal-packages/server-stats/lib/component/databases-table.jsx b/src/internal-packages/server-stats/lib/component/databases-table.jsx
index 2561e22af55..6a9f6e47ea4 100644
--- a/src/internal-packages/server-stats/lib/component/databases-table.jsx
+++ b/src/internal-packages/server-stats/lib/component/databases-table.jsx
@@ -89,7 +89,7 @@ class DatabasesTable extends React.Component {
 
     return (
       <div className="rtss-databases" data-test-id="databases-table">
-        <div className="rtss-databases-create-button action-bar">
+        <div className="rtss-databases-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -101,18 +101,22 @@ class DatabasesTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         {this.props.databases.length === 0 ?
             this.renderNoCollections(isWritable) : null}
         <CreateDatabaseDialog />
diff --git a/src/internal-packages/server-stats/lib/component/performance-component.jsx b/src/internal-packages/server-stats/lib/component/performance-component.jsx
index da20f530236..e342f9c2026 100644
--- a/src/internal-packages/server-stats/lib/component/performance-component.jsx
+++ b/src/internal-packages/server-stats/lib/component/performance-component.jsx
@@ -11,14 +11,20 @@ class PerformanceComponent extends React.Component {
   render() {
     return (
       <section className="rt-perf">
-        <TimeAndPauseButton paused={false} />
-        <DBErrorComponent store={DBErrorStore} />
-        <section className="rt__graphs-out">
-          <GraphsComponent interval={this.props.interval} />
-        </section>
-        <section className="rt__lists-out">
-          <ListsComponent interval={this.props.interval} />
-        </section>
+        <div className="controls-container">
+          <TimeAndPauseButton paused={false} />
+          <DBErrorComponent store={DBErrorStore} />
+        </div>
+        <div className="column-container">
+          <div className="column main">
+            <section className="rt__graphs-out">
+              <GraphsComponent interval={this.props.interval} />
+            </section>
+            <section className="rt__lists-out">
+              <ListsComponent interval={this.props.interval} />
+            </section>
+          </div>
+        </div>
       </section>
     );
   }
diff --git a/src/internal-packages/server-stats/styles/rt-lists.less b/src/internal-packages/server-stats/styles/rt-lists.less
index 592d8f6cb7c..911aae9daf6 100644
--- a/src/internal-packages/server-stats/styles/rt-lists.less
+++ b/src/internal-packages/server-stats/styles/rt-lists.less
@@ -2,10 +2,12 @@
   height: 100%;
 }
 .rt-perf {
-  background-color: #3D4247;
-  height: auto;
-  overflow: scroll;
-  padding-bottom: 100px;
+  .column-container {
+    padding: 12px;
+  }
+  .column.main {
+    background-color: #3D4247;
+  }
 }
 
 .rt__lists-out {
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index 4f43147dac1..6a5beaf2638 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -1,6 +1,5 @@
 .rtss-databases {
   background-color: @gray8;
-  padding: 0 20px 100px 20px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;

From 0f855227fba28ca515de18d356c5f2317af29e1f Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 13:35:51 -0500
Subject: [PATCH 09/24] fix document scroll behavior

---
 src/internal-packages/crud/lib/component/document-list.jsx | 2 +-
 src/internal-packages/home/styles/index.less               | 3 +++
 src/internal-packages/sidebar/styles/index.less            | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 2f508399061..4b04e5ec113 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -77,7 +77,7 @@ class DocumentList extends React.Component {
    * Attach the scroll event to the parent container.
    */
   attachScrollEvent() {
-    this._node.parentNode.addEventListener(
+    this._node.parentNode.parentNode.addEventListener(
       SCROLL_EVENT,
       this.handleScroll.bind(this)
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index d9c691de760..639b91093ba 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -111,6 +111,9 @@ GLOBAL FLEXBOX LAYOUT STYLES
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 67px;
+    /*
+    END GLOBAL FLEXBOX LAYOUT STYLES
+    */
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index bb906f6b11c..df89a756deb 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -8,7 +8,7 @@
   flex-shrink: 0;
 
   &-expanded {
-    flex-basis: 286px;
+    flex-basis: 250px;
   }
 
   &-collapsed {

From f02d99589a50f152a87dfaae3bac7d6517459ef1 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 14:20:26 -0500
Subject: [PATCH 10/24] cleanup; fix lint error;

---
 src/app/styles/index.less                     |  1 -
 .../lib/components/compass-explain.jsx        |  4 ++-
 .../home/lib/components/home.jsx              |  8 ++---
 src/internal-packages/home/styles/index.less  |  5 +--
 .../sidebar/lib/components/sidebar.jsx        |  7 +++-
 .../sidebar/styles/index.less                 | 36 +++++++++++++------
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 1f6f4713b81..b902341a0ee 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -84,7 +84,6 @@ i.syntax-help {
 
 //action-bar, just a drop-shadow for now but should think about where to put these styles eventually
 .action-bar {
-  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
   height: 32px;
   background: @gray8;
   border-bottom: 1px solid @gray7;
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index e5647b35d9e..f8909133b9d 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -84,7 +84,9 @@ class CompassExplain extends React.Component {
 
     return (
       <div className="compass-explain">
-        <this.queryBar />
+        <div className="controls-container">
+          <this.queryBar />
+        </div>
         {content}
       </div>
     );
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index 39c58d53edc..c4ebbc48602 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -15,15 +15,15 @@ class Home extends React.Component {
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
   }
 
-  collapseSidebar() {
-    this.setState({ collapsed: !this.state.collapsed });
-  }
-
   getContentClasses() {
     return 'content' +
       (this.state.collapsed ? ' content-sidebar-collapsed' : ' content-sidebar-expanded');
   }
 
+  collapseSidebar() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   renderContent() {
     let view;
     switch (this.props.mode) {
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 639b91093ba..7e73f62a05c 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -79,8 +79,9 @@ GLOBAL FLEXBOX LAYOUT STYLES
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: auto;
-      box-shadow: 0 1px 2px rgba(0,0,0,.2);
-      z-index: 1;
+      box-shadow: 0 2px 2px rgba(0,0,0,.2);
+      z-index: 4;
+      border-top: 1px solid @gray7;
     }
 
     .column-container {
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index dffadb3aaa2..28dd4f1305b 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -21,6 +21,11 @@ class Sidebar extends React.Component {
       (this.state.collapsed ? ' compass-sidebar-collapsed' : ' compass-sidebar-expanded');
   }
 
+  getToggleClasses() {
+    return 'fa' +
+      (this.state.collapsed ? ' fa-forward' : ' fa-backward');
+  }
+
   handleCollapse() {
     // console.log(this.state.collapsed);
     this.props.onCollapse();
@@ -45,7 +50,7 @@ class Sidebar extends React.Component {
       <div className={this.getSidebarClasses()} data-test-id="instance-sidebar">
         <div
           className="compass-sidebar-toggle" onClick={this.handleCollapse.bind(this)}>
-          <i className="fa fa-backward"></i>
+          <i className={this.getToggleClasses()}></i>
         </div>
         <StoreConnector store={InstanceStore}>
           <SidebarInstanceProperties
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index df89a756deb..45890582210 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,9 +1,7 @@
 .compass-sidebar {
   margin: 0;
-
   background: #4c5259;
   color: #bfbfbe;
-  transition: all 180ms ease-out;
   flex-grow: 0;
   flex-shrink: 0;
 
@@ -29,6 +27,7 @@
     line-height: 11px;
     padding-right: 3px;
     text-align: right;
+    cursor: pointer;
     i {
       line-height: 11px;
       font-size: 10px;
@@ -169,7 +168,6 @@
     color: #fff;
     width: 100%;
     border: none;
-    transition: all 150ms ease;
     font-size: 14px;
     font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -295,12 +293,30 @@
 
 .compass-sidebar-collapsed {
   overflow: hidden;
-  .compass-sidebar {
-    &-content,
-    &-property-column,
-    &-instance-hostname,
-    &-instance-version {
-      display: none;
-    }
+  .compass-sidebar-content,
+  .compass-sidebar-property-column,
+  .compass-sidebar-instance-hostname,
+  .compass-sidebar-instance-version {
+    display: none;
+  }
+  .compass-sidebar-instance {
+    padding-top: 8px;
+    padding-bottom: 6px;
+  }
+  .compass-sidebar-properties {
+    padding-bottom: 0;
+  }
+  .compass-sidebar-stats {
+    padding-top: 6px;
+    padding-bottom: 0;
+    height: 36px;
+    margin: 0;
+  }
+  .compass-sidebar-search-input {
+    width: 30px;
+    padding: 11px 6px 5px 30px;
+  }
+  .compass-sidebar-search-icon {
+    top: 10px;
   }
 }

From a10c5ef2ce44e94c2a6669a0b650c8f0f69dda73 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 14:43:37 -0500
Subject: [PATCH 11/24] remove comments on explain-body.less

---
 src/internal-packages/explain/styles/explain-body.less | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/internal-packages/explain/styles/explain-body.less b/src/internal-packages/explain/styles/explain-body.less
index 29c4190a3be..4bcb061c0c0 100644
--- a/src/internal-packages/explain/styles/explain-body.less
+++ b/src/internal-packages/explain/styles/explain-body.less
@@ -1,9 +1,3 @@
 .explain-body {
   background: @gray8;
-  // position: absolute;
-  // top: 215px;
-  // left: 0px;
-  // right: 0px;
-  // bottom: 0px;
-  // overflow-y: scroll;
 }

From 5022532846653f6d955161522d4280ae1fc47ec7 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 15:23:42 -0500
Subject: [PATCH 12/24] resolving conflict

---
 src/internal-packages/sidebar/lib/components/sidebar.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index 28dd4f1305b..2ce9b55f4fb 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -85,7 +85,8 @@ Sidebar.propTypes = {
   instance: React.PropTypes.object,
   databases: React.PropTypes.array,
   onCollapse: React.PropTypes.func,
-  activeNamespace: React.PropTypes.string
+  activeNamespace: React.PropTypes.string,
+  expanded: React.PropTypes.bool
 };
 
 module.exports = Sidebar;

From ab61bd852a38377e740b54534ee3fad76bc6d092 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 14:26:38 -0500
Subject: [PATCH 13/24] sidebar collapse button

---
 src/app/help/index.jade                       |  2 +-
 src/app/help/index.less                       |  6 ++--
 src/app/styles/index.less                     |  2 +-
 .../home/lib/components/home.jsx              | 18 ++++++++++--
 .../sidebar/lib/components/index.jsx          |  6 +++-
 .../sidebar/lib/components/sidebar.jsx        | 21 +++++++++++++-
 .../sidebar/styles/index.less                 | 28 +++++++++++++++++++
 7 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/app/help/index.jade b/src/app/help/index.jade
index 1e9d51944b5..1df5bf2cd58 100644
--- a/src/app/help/index.jade
+++ b/src/app/help/index.jade
@@ -1,5 +1,5 @@
 .page.help
   div(data-hook='sidebar-subview')
-  .content.with-sidebar
+  .content-sidebar-expanded
     h1.help-entry-title(data-hook='help-entry-title')
     .help-entry(data-hook='help-entry-content')
diff --git a/src/app/help/index.less b/src/app/help/index.less
index 7ec9551ff2d..b4feb8b9bae 100644
--- a/src/app/help/index.less
+++ b/src/app/help/index.less
@@ -1,8 +1,10 @@
 .page.help  {
   .container-fluid;
 
-  .content.with-sidebar {
-    padding: 0 15px 15px 15px;
+  .content {
+    &-sidebar-expanded {
+        padding: 0 15px 15px 15px;
+    }
   }
   .related {
     margin-top: 20px;
diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index a27fcadda37..9dc9d5f8def 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -29,7 +29,7 @@ html, body {
     max-height: 100%;
     overflow-y: auto;
 
-    &.with-sidebar {
+    &-sidebar-expanded {
       margin-left: @sidebar-width;
     }
   }
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index dbcbe523261..90bd8638c58 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -5,6 +5,7 @@ const ReactTooltip = require('react-tooltip');
 class Home extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { collapsed: false };
     this.sideBar = app.appRegistry.getComponent('Sidebar.Component');
     this.collectionView = app.appRegistry.getComponent('Collection.Collection');
     this.collectionsTable = app.appRegistry.getComponent('Database.CollectionsTable');
@@ -14,6 +15,19 @@ class Home extends React.Component {
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
   }
 
+  collapseSidebar() {
+    // console.log("COLLAPSE!!!!!");
+    // console.log("COLLAPSE!!!!!");
+    // console.log("COLLAPSE!!!!!");
+    console.log(this.state.collapsed);
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  getContentClasses() {
+    return 'content' +
+      (this.state.collapsed ? ' content-sidebar-collapsed' : ' content-sidebar-expanded');
+  }
+
   renderContent() {
     let view;
     switch (this.props.mode) {
@@ -44,11 +58,11 @@ class Home extends React.Component {
 
     return (
       <div className="page">
-        <div className="content with-sidebar">
+        <div className={this.getContentClasses()}>
           {this.renderContent()}
         </div>
         <div className="compass-sidebar-container">
-          <this.sideBar />
+          <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
         </div>
         {isNotWritableTooltip}
       </div>
diff --git a/src/internal-packages/sidebar/lib/components/index.jsx b/src/internal-packages/sidebar/lib/components/index.jsx
index a71dab94bb3..5608b4c47bf 100644
--- a/src/internal-packages/sidebar/lib/components/index.jsx
+++ b/src/internal-packages/sidebar/lib/components/index.jsx
@@ -16,12 +16,16 @@ class ConnectedSidebar extends React.Component {
   render() {
     return (
       <StoreConnector store={SidebarStore}>
-        <Sidebar />
+        <Sidebar onCollapse={this.props.onCollapse.bind(this)}/>
       </StoreConnector>
     );
   }
 }
 
+ConnectedSidebar.propTypes = {
+  onCollapse: React.PropTypes.func
+};
+
 ConnectedSidebar.displayName = 'ConnectedSidbar';
 
 module.exports = ConnectedSidebar;
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index 51fe0aff68f..24e6c15144a 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -11,6 +11,20 @@ const SidebarInstanceProperties = require('./sidebar-instance-properties');
 
 
 class Sidebar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { collapsed: false };
+  }
+
+  getSidebarClasses() {
+    return 'compass-sidebar' +
+      (this.state.collapsed ? ' compass-sidebar-collapsed' : '');
+  }
+
+  handleCollapse() {
+    this.props.onCollapse();
+    this.setState({ collapsed: !this.state.collapsed });
+  }
 
   handleFilter(event) {
     const searchString = event.target.value;
@@ -27,7 +41,11 @@ class Sidebar extends React.Component {
 
   render() {
     return (
-      <div className="compass-sidebar" data-test-id="instance-sidebar">
+      <div className={this.getSidebarClasses()} data-test-id="instance-sidebar">
+        <div
+          className="compass-sidebar-toggle" onClick={this.handleCollapse.bind(this)}>
+          <i className="fa fa-backward"></i>
+        </div>
         <StoreConnector store={InstanceStore}>
           <SidebarInstanceProperties
             connection={app.connection}
@@ -61,6 +79,7 @@ class Sidebar extends React.Component {
 Sidebar.propTypes = {
   instance: React.PropTypes.object,
   databases: React.PropTypes.array,
+  onCollapse: React.PropTypes.func,
   activeNamespace: React.PropTypes.string,
   expanded: React.PropTypes.bool
 };
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index af4aabaa50f..33a04979b8f 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -3,6 +3,7 @@
   left: 0;
   top: 0;
   bottom: 0;
+  z-index: 4;
 }
 
 .compass-sidebar {
@@ -13,6 +14,7 @@
   width: 250px;
   background: #4c5259;
   color: #bfbfbe;
+  transition: all 180ms ease-out;
 
   &-content {
     overflow-y: scroll;
@@ -22,6 +24,18 @@
     height: ~"calc(100% - 112px)";
   }
 
+  &-toggle {
+    background: #343B43;
+    height: 12px;
+    line-height: 11px;
+    padding-right: 3px;
+    text-align: right;
+    i {
+      line-height: 11px;
+      font-size: 10px;
+    }
+  }
+
   &-title {
     white-space: nowrap;
     overflow-x: hidden;
@@ -279,3 +293,17 @@
     }
   }
 }
+
+.compass-sidebar-collapsed {
+  width: 36px;
+  overflow: hidden;
+
+  .compass-sidebar {
+    &-content,
+    &-property-column,
+    &-instance-hostname,
+    &-instance-version {
+      display: none;
+    }
+  }
+}

From 9164cd9b38b673de4412011317892419dda5c57d Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 14:44:51 -0500
Subject: [PATCH 14/24] remove position:fixed

---
 src/app/styles/index.less                                 | 4 ----
 src/internal-packages/collection/styles/index.less        | 2 --
 src/internal-packages/home/lib/components/home.jsx        | 8 +-------
 src/internal-packages/home/styles/index.less              | 3 ---
 src/internal-packages/server-stats/styles/rt-nav.less     | 5 -----
 .../server-stats/styles/rtss-databases.less               | 5 -----
 src/internal-packages/sidebar/lib/components/sidebar.jsx  | 2 +-
 src/internal-packages/sidebar/styles/index.less           | 8 --------
 8 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 9dc9d5f8def..ed384714f64 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -104,10 +104,6 @@ i.syntax-help {
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  left: 250px;
-  right: 0;
-  z-index: 4;
 }
 
   .rtss-databases,
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 8a188e2923a..badd8fa7deb 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -1,8 +1,6 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index 90bd8638c58..39c58d53edc 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -16,10 +16,6 @@ class Home extends React.Component {
   }
 
   collapseSidebar() {
-    // console.log("COLLAPSE!!!!!");
-    // console.log("COLLAPSE!!!!!");
-    // console.log("COLLAPSE!!!!!");
-    console.log(this.state.collapsed);
     this.setState({ collapsed: !this.state.collapsed });
   }
 
@@ -61,9 +57,7 @@ class Home extends React.Component {
         <div className={this.getContentClasses()}>
           {this.renderContent()}
         </div>
-        <div className="compass-sidebar-container">
-          <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
-        </div>
+        <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
         {isNotWritableTooltip}
       </div>
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index e65388b407f..80391f0475a 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -47,10 +47,7 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
-    width: ~"calc(100% - 250px)";
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/server-stats/styles/rt-nav.less b/src/internal-packages/server-stats/styles/rt-nav.less
index 40de6bb7e07..cb2b333c7d3 100644
--- a/src/internal-packages/server-stats/styles/rt-nav.less
+++ b/src/internal-packages/server-stats/styles/rt-nav.less
@@ -4,11 +4,6 @@
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  top: 46px;
-  left: 250px;
-  right: 0;
-  z-index: 1;
 }
 
 .time,
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index 16f98c2febf..a095706b1c6 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -18,11 +18,6 @@
     border-bottom: 1px solid @gray7;
     padding-top: 4px;
     padding-left: 20px;
-    position: fixed;
-    top: 46px;
-    left: 250px;
-    right: 0;
-    z-index: 1;
   }
 }
 
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index 24e6c15144a..e3d97e17134 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -18,7 +18,7 @@ class Sidebar extends React.Component {
 
   getSidebarClasses() {
     return 'compass-sidebar' +
-      (this.state.collapsed ? ' compass-sidebar-collapsed' : '');
+      (this.state.collapsed ? ' compass-sidebar-collapsed' : ' compass-sidebar-expanded');
   }
 
   handleCollapse() {
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index 33a04979b8f..1c3735843eb 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,11 +1,3 @@
-.compass-sidebar-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
 .compass-sidebar {
   margin: 0;
   position: absolute;

From 6b9454d03ab4c3900c84bbe99b22c35f7ae68db2 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 15:09:02 -0500
Subject: [PATCH 15/24] removed all positioning on main content containers

---
 src/app/styles/index.less                     | 28 ------------
 .../app/styles/tab-nav-bar.less               | 45 -------------------
 .../collection/styles/index.less              | 33 --------------
 .../crud/lib/component/document-list.jsx      |  2 +-
 .../database/styles/collections-table.less    |  5 ---
 .../lib/components/compass-explain.jsx        |  2 +-
 src/internal-packages/home/styles/index.less  | 33 --------------
 .../indexes/lib/component/indexes.jsx         |  2 +-
 .../indexes/styles/index.less                 |  2 +-
 src/internal-packages/query/styles/index.less |  4 +-
 .../schema/lib/component/index.jsx            |  2 +-
 .../server-stats/styles/rt-lists.less         |  5 ---
 .../server-stats/styles/rtss-databases.less   |  6 ---
 .../validation/lib/components/validation.jsx  |  2 +-
 14 files changed, 7 insertions(+), 164 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index ed384714f64..4f34dd4da57 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -18,20 +18,11 @@ html, body {
 }
 
 #application {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
 
   .content {
     height: 100%;
     max-height: 100%;
-    overflow-y: auto;
 
-    &-sidebar-expanded {
-      margin-left: @sidebar-width;
-    }
   }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
@@ -105,22 +96,3 @@ i.syntax-help {
   padding-top: 4px;
   padding-left: 20px;
 }
-
-  .rtss-databases,
-  .collections {
-    .action-bar {
-      top: 46px;
-    }
-  }
-
-  .validation {
-    .action-bar {
-      top: 96px;
-    }
-  }
-
-  .column.main {
-      .action-bar {
-        position: static;
-      }
-  }
diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index 49bd763e679..a9eeae11142 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -66,49 +66,4 @@
     cursor: default;
     border-color: @chart1;
   }
-  //shouldn't positioning of the component happen when it's rendered by its parent?
-  &-is-light-theme {
-    .tab-nav-bar-header {
-      top: 50px;
-      height: 46px;
-      z-index: 2;
-      border-bottom: 1px solid #ebebed;
-    }
-  }
-
-  &-is-dark-theme {
-    .tab-nav-bar-header {
-      background-color: #2B3033;
-    }
-
-    .tab-nav-bar-tab {
-      color: #8B8D8F;
-    }
-
-    .tab-nav-bar-link {
-      color: @pw;
-    }
-
-    .tab-nav-bar-is-selected {
-      color: @pw;
-      background-color: #3D4247;
-      border-color: #545454;
-
-      &.tab-nav-bar-tab:hover {
-        background-color: #3D4247;
-      }
-    }
-
-    .tab-nav-bar-tab:hover {
-      background-color: #2B3033;
-      border-color: #545454;
-      border-bottom: none;
-
-      color: @pw;
-
-      .tab-nav-bar-link {
-        color: @pw;
-      }
-    }
-  }
 }
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index badd8fa7deb..554ed1cd8b2 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -17,10 +17,6 @@
     }
   }
 
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
   .column {
     overflow: auto;
     height: auto;
@@ -33,36 +29,7 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    overflow-x: hidden;
     background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
-  }
-
-  .column-container {
-    &.with-message {
-      .main {
-        top: 128px;
-      }
-    }
-    &.with-refinebar {
-      .main {
-        top: 149px;
-      }
-    }
-    &.with-refinebar-and-message {
-      .main {
-        top: 181px;
-      }
-    }
-    &.with-refinebar-and-2xmessage {
-      .main {
-        top: 214px;
-      }
-    }
   }
 
   .side {
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index cfe63e75321..dcecc31801a 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -257,7 +257,7 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents header-margin">
+      <div className="compass-documents">
         <this.queryBar />
         <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
           insertHandler={this.handleOpenInsert.bind(this)} />
diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
index ac5ab687f30..4a7e6b17f99 100644
--- a/src/internal-packages/database/styles/collections-table.less
+++ b/src/internal-packages/database/styles/collections-table.less
@@ -2,11 +2,6 @@
   background-color: @gray8;
   overflow-y: scroll;
   padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index cf0260711ec..732c4f64bc5 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -83,7 +83,7 @@ class CompassExplain extends React.Component {
     }
 
     return (
-      <div className="compass-explain header-margin">
+      <div className="compass-explain">
         <this.queryBar />
         {content}
       </div>
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 80391f0475a..3bedf8cc40c 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -74,10 +74,6 @@
     }
   }
 
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
   .column {
     overflow: auto;
     height: auto;
@@ -90,38 +86,9 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    overflow-x: hidden;
     background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
   }
 
-    .column-container {
-      &.with-message {
-        .main {
-          top: 128px;
-        }
-      }
-      &.with-refinebar {
-        .main {
-          top: 149px;
-        }
-      }
-      &.with-refinebar-and-message {
-        .main {
-          top: 181px;
-        }
-      }
-      &.with-refinebar-and-2xmessage {
-        .main {
-          top: 214px;
-        }
-      }
-    }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index 0960c8aebf4..c3ed13c5528 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -81,7 +81,7 @@ class Indexes extends React.Component {
    */
   render() {
     return (
-      <div className="index-container header-margin">
+      <div className="index-container">
         {this.state.readonly ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index 862ecfa18ca..98c78524bd1 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/src/internal-packages/indexes/styles/index.less
@@ -22,7 +22,7 @@
 
   .column-container {
     .column.main {
-      margin-top: 32px;
+
     }
   }
 
diff --git a/src/internal-packages/query/styles/index.less b/src/internal-packages/query/styles/index.less
index 5ebaf201b8a..f316d688df2 100644
--- a/src/internal-packages/query/styles/index.less
+++ b/src/internal-packages/query/styles/index.less
@@ -1,6 +1,4 @@
 .refine-view-container {
-  position: relative;
-  z-index: 1;
 
   .query-input-container {
     padding: 12px 10px 12px;
@@ -52,7 +50,7 @@
     font-size: 11px;
     padding: 2px 4px !important;
   }
-  
+
   .message-container {
     background: @gray7;
   }
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 83600d0c839..843fc36075b 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,7 +93,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div className="header-margin">
+      <div>
         <this.queryBar />
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
         <div className="column-container with-refinebar-and-message">
diff --git a/src/internal-packages/server-stats/styles/rt-lists.less b/src/internal-packages/server-stats/styles/rt-lists.less
index c7b6f4cbc56..592d8f6cb7c 100644
--- a/src/internal-packages/server-stats/styles/rt-lists.less
+++ b/src/internal-packages/server-stats/styles/rt-lists.less
@@ -6,11 +6,6 @@
   height: auto;
   overflow: scroll;
   padding-bottom: 100px;
-  position: absolute;
-  top: 88px;
-  right: 10px;
-  bottom: 10px;
-  left: 260px;
 }
 
 .rt__lists-out {
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index a095706b1c6..4f43147dac1 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -1,12 +1,6 @@
 .rtss-databases {
   background-color: @gray8;
-  overflow-y: scroll;
   padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 043c4e98687..ce2dea836b5 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -89,7 +89,7 @@ class Validation extends React.Component {
 
   render() {
     return (
-      <div className="validation header-margin">
+      <div className="validation">
         <div className="column-container with-message">
           {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
         </div>

From 40c7fa2e63cfdb9a014b58f2cfa0769064547dd4 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 15:33:00 -0500
Subject: [PATCH 16/24] basic flexbox for content and sidebar

---
 src/app/styles/index.less                      | 11 +++++++++--
 src/internal-packages/home/styles/index.less   | 18 +++++++++++-------
 .../sidebar/styles/index.less                  | 17 +++++++++++------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 4f34dd4da57..ac7880b41e1 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -20,8 +20,15 @@ html, body {
 #application {
 
   .content {
-    height: 100%;
-    max-height: 100%;
+
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 914px;
+    order: 2;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: stretch;
+
 
   }
   #statusbar {
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 3bedf8cc40c..33f34c81564 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -1,8 +1,8 @@
 .page {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
 }
 
 .badge {
@@ -24,9 +24,13 @@
 }
 
 .content {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 914px;
+  order: 2;
+  // display: flex;
+  // flex-direction: column;
+  // align-items: stretch;
 }
 
 .panel-title {
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index 1c3735843eb..bb906f6b11c 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,12 +1,19 @@
 .compass-sidebar {
   margin: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 250px;
+
   background: #4c5259;
   color: #bfbfbe;
   transition: all 180ms ease-out;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  &-expanded {
+    flex-basis: 286px;
+  }
+
+  &-collapsed {
+    flex-basis: 36px;
+  }
 
   &-content {
     overflow-y: scroll;
@@ -287,9 +294,7 @@
 }
 
 .compass-sidebar-collapsed {
-  width: 36px;
   overflow: hidden;
-
   .compass-sidebar {
     &-content,
     &-property-column,

From e960f98b8fa79e515cd4b09d7941a71be53ffb46 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Thu, 12 Jan 2017 16:38:01 -0500
Subject: [PATCH 17/24] removed old styles, removed classes intended to add
 positioning for content on column-container

---
 .../collection/styles/index.less              | 43 ------------------
 .../crud/lib/component/document-list.jsx      |  2 +-
 .../lib/components/compass-explain.jsx        |  2 +-
 src/internal-packages/home/styles/index.less  | 44 -------------------
 .../indexes/styles/index.less                 |  6 ---
 .../schema/lib/component/index.jsx            |  2 +-
 .../validation/lib/components/validation.jsx  |  2 +-
 7 files changed, 4 insertions(+), 97 deletions(-)

diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 554ed1cd8b2..1068de53cfc 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -11,11 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
 
   .column {
     overflow: auto;
@@ -41,42 +36,4 @@
     top: 30px;
   }
 
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index dcecc31801a..64a3b61a0a5 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -239,7 +239,7 @@ class DocumentList extends React.Component {
       );
     }
     return (
-      <div className="column-container with-refinebar-and-2xmessage">
+      <div className="column-container">
         <div className="column main">
           <ol className={LIST_CLASS} ref={(c) => this._node = c}>
             {this.state.docs}
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index 732c4f64bc5..e5647b35d9e 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -45,7 +45,7 @@ class CompassExplain extends React.Component {
 
   renderContent() {
     return (
-      <div className="column-container with-refinebar">
+      <div className="column-container">
         <div className="column main">
           <ExplainHeader
             viewType={this.props.viewType}
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 33f34c81564..f2e631702ba 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -72,11 +72,6 @@
       margin-left: 2px;
     }
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
 
   .column {
     overflow: auto;
@@ -101,45 +96,6 @@
     right: -12px;
     top: 30px;
   }
-
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
 
 .sidebar {
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index 98c78524bd1..e6142d98eb4 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/src/internal-packages/indexes/styles/index.less
@@ -20,12 +20,6 @@
 
 .index-container {
 
-  .column-container {
-    .column.main {
-
-    }
-  }
-
   table {
     table-layout: auto;
     border-collapse: collapse;
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 843fc36075b..73324ac41cd 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -96,7 +96,7 @@ const Schema = React.createClass({
       <div>
         <this.queryBar />
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
-        <div className="column-container with-refinebar-and-message">
+        <div className="column-container">
           <div className="column main">
             <div className="schema-field-list">
               {fieldList}
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index ce2dea836b5..7664cbadbe0 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -90,7 +90,7 @@ class Validation extends React.Component {
   render() {
     return (
       <div className="validation">
-        <div className="column-container with-message">
+        <div className="column-container">
           {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
         </div>
       </div>

From 7b942bae69430093316d557e2ba6b43cffc3a392 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Fri, 13 Jan 2017 16:18:03 -0500
Subject: [PATCH 18/24] more cleanup

---
 src/app/styles/index.less                      | 12 ------------
 .../collection/styles/index.less               | 16 ----------------
 .../crud/lib/component/document-list.jsx       |  8 +++++---
 src/internal-packages/home/styles/index.less   | 18 ------------------
 .../schema/lib/component/index.jsx             |  8 +++++---
 5 files changed, 10 insertions(+), 52 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index ac7880b41e1..1f6f4713b81 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -19,18 +19,6 @@ html, body {
 
 #application {
 
-  .content {
-
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: 914px;
-    order: 2;
-    // display: flex;
-    // flex-direction: column;
-    // align-items: stretch;
-
-
-  }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
     position: fixed;
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 1068de53cfc..6048746f61b 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -11,22 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    background-color: @gray8;
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 64a3b61a0a5..3dc4d58173f 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -258,9 +258,11 @@ class DocumentList extends React.Component {
   render() {
     return (
       <div className="compass-documents">
-        <this.queryBar />
-        <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
-          insertHandler={this.handleOpenInsert.bind(this)} />
+        <div>
+          <this.queryBar />
+          <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
+            insertHandler={this.handleOpenInsert.bind(this)} />
+        </div>
         {this.renderContent()}
       </div>
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index f2e631702ba..30131f9d6f7 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -28,9 +28,6 @@
   flex-shrink: 0;
   flex-basis: 914px;
   order: 2;
-  // display: flex;
-  // flex-direction: column;
-  // align-items: stretch;
 }
 
 .panel-title {
@@ -73,21 +70,6 @@
     }
   }
 
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    background-color: @gray8;
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 73324ac41cd..f541f2ed95f 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,9 +93,11 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div>
-        <this.queryBar />
-        <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
+      <div className="schema-container">
+        <div className="controls-container">
+          <this.queryBar />
+          <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
+        </div>
         <div className="column-container">
           <div className="column main">
             <div className="schema-field-list">

From b056d7c5e1179e78381e21cf6198fc795dcaf87e Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Sun, 15 Jan 2017 23:12:06 -0500
Subject: [PATCH 19/24] indexes, explain and validation tab flexbox

---
 .../app/styles/tab-nav-bar.less               | 16 +++++-
 .../crud/lib/component/document-list.jsx      |  4 +-
 .../explain/styles/explain-body.less          | 12 ++--
 src/internal-packages/home/styles/index.less  | 56 ++++++++++++++++++-
 .../indexes/lib/component/indexes.jsx         |  5 +-
 .../schema/lib/component/index.jsx            |  2 +-
 .../validation/lib/components/validation.jsx  | 31 +++++-----
 7 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index a9eeae11142..b0861ee067f 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -1,9 +1,23 @@
 .tab-nav-bar {
 
+  &-is-light-theme {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   &-header {
-    height: 45px;
     background-color: @pw;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 45px;
+
     display: flex;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
     position: relative;
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 3dc4d58173f..2f508399061 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -257,8 +257,8 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents">
-        <div>
+      <div className="content-container content-container-documents compass-documents">
+        <div className="controls-container">
           <this.queryBar />
           <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
             insertHandler={this.handleOpenInsert.bind(this)} />
diff --git a/src/internal-packages/explain/styles/explain-body.less b/src/internal-packages/explain/styles/explain-body.less
index f6ffa1790fd..29c4190a3be 100644
--- a/src/internal-packages/explain/styles/explain-body.less
+++ b/src/internal-packages/explain/styles/explain-body.less
@@ -1,9 +1,9 @@
 .explain-body {
   background: @gray8;
-  position: absolute;
-  top: 215px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  overflow-y: scroll;
+  // position: absolute;
+  // top: 215px;
+  // left: 0px;
+  // right: 0px;
+  // bottom: 0px;
+  // overflow-y: scroll;
 }
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 30131f9d6f7..0db8595aae9 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  height: 100%;
+  height: 100vh;
 }
 
 .badge {
@@ -45,10 +45,64 @@
   flex-direction: row;
 }
 
+  .tab-views {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+  }
+
+    .tab {
+      display: flex;
+      width: 100%;
+    }
+
+    .schema-container,
+    .compass-documents,
+    .index-container,
+    .compass-explain,
+    .validation-container {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+            .controls-container {
+              flex-grow: 0;
+              flex-shrink: 0;
+              flex-basis: auto;
+            }
+
+            .column-container {
+              flex-grow: 1;
+              flex-shrink: 1;
+              flex-basis: auto;
+
+              flex-direction: column;
+              display: flex;
+              overflow: auto;
+              // box-shadow: inset 0 5px 3px rgba(0,0,0,.2);
+              background: @gray8;
+            }
+
+                    .column.main {
+                      flex: 1;
+                      margin-bottom: 100px;
+                      padding: 0 24px;
+                    }
+
 .collection-view {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
   header {
     padding: 12px 0 0;
     background: @pw;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 67px;
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index c3ed13c5528..436cd6669a3 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -55,7 +55,6 @@ class Indexes extends React.Component {
   renderComponent() {
     return (
       <div className="column-container">
-        <CreateIndexButton isWritable={this.state.writable} />
         <div className="column main">
           <table data-test-id="indexes-table">
             <IndexHeader />
@@ -82,6 +81,10 @@ class Indexes extends React.Component {
   render() {
     return (
       <div className="index-container">
+        {/* NOT SURE if we need to wrap the controls-container in a readonly conditional as well. */}
+        <div className="controls-container">
+          <CreateIndexButton isWritable={this.state.writable} />
+        </div>
         {this.state.readonly ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index f541f2ed95f..576b06ad7b1 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,7 +93,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div className="schema-container">
+      <div className="content-container content-container-schema schema-container">
         <div className="controls-container">
           <this.queryBar />
           <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 7664cbadbe0..26465b9d557 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -58,20 +58,8 @@ class Validation extends React.Component {
         />
       );
 
-    const activeButton = this.props.isExpressibleByRules ?
-      this.props.viewMode : 'JSON';
-
     return (
-      <div>
-        <ValidationStatusRow>
-          <ViewSwitcher
-            label="View as:"
-            buttonLabels={['Rule Builder', 'JSON']}
-            activeButton={activeButton}
-            onClick={this.switchView.bind(this)}
-            disabled={!this.props.isExpressibleByRules}
-          />
-        </ValidationStatusRow>
+      <div className="column-container">
         <div className="column main">
           {view}
         </div>
@@ -88,11 +76,22 @@ class Validation extends React.Component {
   }
 
   render() {
+    const activeButton = this.props.isExpressibleByRules ?
+      this.props.viewMode : 'JSON';
     return (
-      <div className="validation">
-        <div className="column-container">
-          {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
+      <div className="validation-container">
+        <div className="controls-container">
+          <ValidationStatusRow>
+            <ViewSwitcher
+              label="View as:"
+              buttonLabels={['Rule Builder', 'JSON']}
+              activeButton={activeButton}
+              onClick={this.switchView.bind(this)}
+              disabled={!this.props.isExpressibleByRules}
+            />
+          </ValidationStatusRow>
         </div>
+        {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
   }

From d8197c63db2aa326f9f4e64ea3880c20b386e154 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 00:17:07 -0500
Subject: [PATCH 20/24] collections table, databases table, RTSS view flexbox
 support

---
 .../app/styles/tab-nav-bar.less               |  2 -
 .../lib/components/collections-table.jsx      | 30 ++++---
 .../database/styles/collections-table.less    |  2 -
 src/internal-packages/home/styles/index.less  | 86 ++++++++++---------
 .../lib/component/databases-table.jsx         | 30 ++++---
 .../lib/component/performance-component.jsx   | 22 +++--
 .../server-stats/styles/rt-lists.less         | 10 ++-
 .../server-stats/styles/rtss-databases.less   |  1 -
 8 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index b0861ee067f..5325367d332 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -11,11 +11,9 @@
 
   &-header {
     background-color: @pw;
-
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 45px;
-
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
diff --git a/src/internal-packages/database/lib/components/collections-table.jsx b/src/internal-packages/database/lib/components/collections-table.jsx
index 239f2a824ac..c3b4f548963 100644
--- a/src/internal-packages/database/lib/components/collections-table.jsx
+++ b/src/internal-packages/database/lib/components/collections-table.jsx
@@ -66,7 +66,7 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table" data-test-id="collections-table">
-        <div className="collections-table-create-button action-bar">
+        <div className="collections-table-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -78,18 +78,22 @@ class CollectionsTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         <CreateCollectionDialog />
         <DropCollectionDialog />
       </div>
diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
index 4a7e6b17f99..abee847467e 100644
--- a/src/internal-packages/database/styles/collections-table.less
+++ b/src/internal-packages/database/styles/collections-table.less
@@ -1,7 +1,5 @@
 .collections-table {
   background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 0db8595aae9..d9c691de760 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -45,53 +45,62 @@
   flex-direction: row;
 }
 
-  .tab-views {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
+/*
+GLOBAL FLEXBOX LAYOUT STYLES
+*/
+.tab-views {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+}
+
+  .tab {
     display: flex;
+    width: 100%;
   }
 
-    .tab {
-      display: flex;
-      width: 100%;
+  .rtss-databases,
+  .rt-perf, //rtss charts
+  .collections-table,
+  //collection views
+  .schema-container,
+  .compass-documents,
+  .index-container,
+  .compass-explain,
+  .validation-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+    .controls-container {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+      box-shadow: 0 1px 2px rgba(0,0,0,.2);
+      z-index: 1;
     }
 
-    .schema-container,
-    .compass-documents,
-    .index-container,
-    .compass-explain,
-    .validation-container {
-      display: flex;
+    .column-container {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
       flex-direction: column;
-      align-items: stretch;
-      width: 100%;
+      display: flex;
+      overflow: auto;
+      background: @gray8;
     }
 
-            .controls-container {
-              flex-grow: 0;
-              flex-shrink: 0;
-              flex-basis: auto;
-            }
-
-            .column-container {
-              flex-grow: 1;
-              flex-shrink: 1;
-              flex-basis: auto;
-
-              flex-direction: column;
-              display: flex;
-              overflow: auto;
-              // box-shadow: inset 0 5px 3px rgba(0,0,0,.2);
-              background: @gray8;
-            }
-
-                    .column.main {
-                      flex: 1;
-                      margin-bottom: 100px;
-                      padding: 0 24px;
-                    }
+      .column.main {
+        flex: 1;
+        margin-bottom: 100px;
+        padding: 0 24px;
+      }
 
+.RTSS, //databases table
+.collections, // collections table
 .collection-view {
   display: flex;
   flex-direction: column;
@@ -99,7 +108,6 @@
   height: 100%;
   header {
     padding: 12px 0 0;
-    background: @pw;
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 67px;
diff --git a/src/internal-packages/server-stats/lib/component/databases-table.jsx b/src/internal-packages/server-stats/lib/component/databases-table.jsx
index 2561e22af55..6a9f6e47ea4 100644
--- a/src/internal-packages/server-stats/lib/component/databases-table.jsx
+++ b/src/internal-packages/server-stats/lib/component/databases-table.jsx
@@ -89,7 +89,7 @@ class DatabasesTable extends React.Component {
 
     return (
       <div className="rtss-databases" data-test-id="databases-table">
-        <div className="rtss-databases-create-button action-bar">
+        <div className="rtss-databases-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -101,18 +101,22 @@ class DatabasesTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         {this.props.databases.length === 0 ?
             this.renderNoCollections(isWritable) : null}
         <CreateDatabaseDialog />
diff --git a/src/internal-packages/server-stats/lib/component/performance-component.jsx b/src/internal-packages/server-stats/lib/component/performance-component.jsx
index da20f530236..e342f9c2026 100644
--- a/src/internal-packages/server-stats/lib/component/performance-component.jsx
+++ b/src/internal-packages/server-stats/lib/component/performance-component.jsx
@@ -11,14 +11,20 @@ class PerformanceComponent extends React.Component {
   render() {
     return (
       <section className="rt-perf">
-        <TimeAndPauseButton paused={false} />
-        <DBErrorComponent store={DBErrorStore} />
-        <section className="rt__graphs-out">
-          <GraphsComponent interval={this.props.interval} />
-        </section>
-        <section className="rt__lists-out">
-          <ListsComponent interval={this.props.interval} />
-        </section>
+        <div className="controls-container">
+          <TimeAndPauseButton paused={false} />
+          <DBErrorComponent store={DBErrorStore} />
+        </div>
+        <div className="column-container">
+          <div className="column main">
+            <section className="rt__graphs-out">
+              <GraphsComponent interval={this.props.interval} />
+            </section>
+            <section className="rt__lists-out">
+              <ListsComponent interval={this.props.interval} />
+            </section>
+          </div>
+        </div>
       </section>
     );
   }
diff --git a/src/internal-packages/server-stats/styles/rt-lists.less b/src/internal-packages/server-stats/styles/rt-lists.less
index 592d8f6cb7c..911aae9daf6 100644
--- a/src/internal-packages/server-stats/styles/rt-lists.less
+++ b/src/internal-packages/server-stats/styles/rt-lists.less
@@ -2,10 +2,12 @@
   height: 100%;
 }
 .rt-perf {
-  background-color: #3D4247;
-  height: auto;
-  overflow: scroll;
-  padding-bottom: 100px;
+  .column-container {
+    padding: 12px;
+  }
+  .column.main {
+    background-color: #3D4247;
+  }
 }
 
 .rt__lists-out {
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index 4f43147dac1..6a5beaf2638 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -1,6 +1,5 @@
 .rtss-databases {
   background-color: @gray8;
-  padding: 0 20px 100px 20px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;

From 90c04a9a18543daa0e4e6ea97e8538af3cc8e6e2 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 13:35:51 -0500
Subject: [PATCH 21/24] fix document scroll behavior

---
 src/internal-packages/crud/lib/component/document-list.jsx | 2 +-
 src/internal-packages/home/styles/index.less               | 3 +++
 src/internal-packages/sidebar/styles/index.less            | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index 2f508399061..4b04e5ec113 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -77,7 +77,7 @@ class DocumentList extends React.Component {
    * Attach the scroll event to the parent container.
    */
   attachScrollEvent() {
-    this._node.parentNode.addEventListener(
+    this._node.parentNode.parentNode.addEventListener(
       SCROLL_EVENT,
       this.handleScroll.bind(this)
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index d9c691de760..639b91093ba 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -111,6 +111,9 @@ GLOBAL FLEXBOX LAYOUT STYLES
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: 67px;
+    /*
+    END GLOBAL FLEXBOX LAYOUT STYLES
+    */
     .row {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index bb906f6b11c..df89a756deb 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -8,7 +8,7 @@
   flex-shrink: 0;
 
   &-expanded {
-    flex-basis: 286px;
+    flex-basis: 250px;
   }
 
   &-collapsed {

From d91d8bcfa0d3ab64161f1daae9ea36825eeec66b Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 14:20:26 -0500
Subject: [PATCH 22/24] cleanup; fix lint error;

---
 src/app/styles/index.less                     |  1 -
 .../lib/components/compass-explain.jsx        |  4 ++-
 .../home/lib/components/home.jsx              |  8 ++---
 src/internal-packages/home/styles/index.less  |  5 +--
 .../sidebar/lib/components/sidebar.jsx        |  7 +++-
 .../sidebar/styles/index.less                 | 36 +++++++++++++------
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index 1f6f4713b81..b902341a0ee 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -84,7 +84,6 @@ i.syntax-help {
 
 //action-bar, just a drop-shadow for now but should think about where to put these styles eventually
 .action-bar {
-  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
   height: 32px;
   background: @gray8;
   border-bottom: 1px solid @gray7;
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index e5647b35d9e..f8909133b9d 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -84,7 +84,9 @@ class CompassExplain extends React.Component {
 
     return (
       <div className="compass-explain">
-        <this.queryBar />
+        <div className="controls-container">
+          <this.queryBar />
+        </div>
         {content}
       </div>
     );
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index 39c58d53edc..c4ebbc48602 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -15,15 +15,15 @@ class Home extends React.Component {
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
   }
 
-  collapseSidebar() {
-    this.setState({ collapsed: !this.state.collapsed });
-  }
-
   getContentClasses() {
     return 'content' +
       (this.state.collapsed ? ' content-sidebar-collapsed' : ' content-sidebar-expanded');
   }
 
+  collapseSidebar() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   renderContent() {
     let view;
     switch (this.props.mode) {
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index 639b91093ba..7e73f62a05c 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -79,8 +79,9 @@ GLOBAL FLEXBOX LAYOUT STYLES
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: auto;
-      box-shadow: 0 1px 2px rgba(0,0,0,.2);
-      z-index: 1;
+      box-shadow: 0 2px 2px rgba(0,0,0,.2);
+      z-index: 4;
+      border-top: 1px solid @gray7;
     }
 
     .column-container {
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index e3d97e17134..63f49c3f2f1 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -21,6 +21,11 @@ class Sidebar extends React.Component {
       (this.state.collapsed ? ' compass-sidebar-collapsed' : ' compass-sidebar-expanded');
   }
 
+  getToggleClasses() {
+    return 'fa' +
+      (this.state.collapsed ? ' fa-forward' : ' fa-backward');
+  }
+
   handleCollapse() {
     this.props.onCollapse();
     this.setState({ collapsed: !this.state.collapsed });
@@ -44,7 +49,7 @@ class Sidebar extends React.Component {
       <div className={this.getSidebarClasses()} data-test-id="instance-sidebar">
         <div
           className="compass-sidebar-toggle" onClick={this.handleCollapse.bind(this)}>
-          <i className="fa fa-backward"></i>
+          <i className={this.getToggleClasses()}></i>
         </div>
         <StoreConnector store={InstanceStore}>
           <SidebarInstanceProperties
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index df89a756deb..45890582210 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,9 +1,7 @@
 .compass-sidebar {
   margin: 0;
-
   background: #4c5259;
   color: #bfbfbe;
-  transition: all 180ms ease-out;
   flex-grow: 0;
   flex-shrink: 0;
 
@@ -29,6 +27,7 @@
     line-height: 11px;
     padding-right: 3px;
     text-align: right;
+    cursor: pointer;
     i {
       line-height: 11px;
       font-size: 10px;
@@ -169,7 +168,6 @@
     color: #fff;
     width: 100%;
     border: none;
-    transition: all 150ms ease;
     font-size: 14px;
     font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -295,12 +293,30 @@
 
 .compass-sidebar-collapsed {
   overflow: hidden;
-  .compass-sidebar {
-    &-content,
-    &-property-column,
-    &-instance-hostname,
-    &-instance-version {
-      display: none;
-    }
+  .compass-sidebar-content,
+  .compass-sidebar-property-column,
+  .compass-sidebar-instance-hostname,
+  .compass-sidebar-instance-version {
+    display: none;
+  }
+  .compass-sidebar-instance {
+    padding-top: 8px;
+    padding-bottom: 6px;
+  }
+  .compass-sidebar-properties {
+    padding-bottom: 0;
+  }
+  .compass-sidebar-stats {
+    padding-top: 6px;
+    padding-bottom: 0;
+    height: 36px;
+    margin: 0;
+  }
+  .compass-sidebar-search-input {
+    width: 30px;
+    padding: 11px 6px 5px 30px;
+  }
+  .compass-sidebar-search-icon {
+    top: 10px;
   }
 }

From f8c3506a158ca72fe6cabea100714ecfeb0196ad Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Mon, 16 Jan 2017 14:43:37 -0500
Subject: [PATCH 23/24] remove comments on explain-body.less

---
 src/internal-packages/explain/styles/explain-body.less | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/internal-packages/explain/styles/explain-body.less b/src/internal-packages/explain/styles/explain-body.less
index 29c4190a3be..4bcb061c0c0 100644
--- a/src/internal-packages/explain/styles/explain-body.less
+++ b/src/internal-packages/explain/styles/explain-body.less
@@ -1,9 +1,3 @@
 .explain-body {
   background: @gray8;
-  // position: absolute;
-  // top: 215px;
-  // left: 0px;
-  // right: 0px;
-  // bottom: 0px;
-  // overflow-y: scroll;
 }

From f3162c01033b118776b04b9718df05d49c2eff81 Mon Sep 17 00:00:00 2001
From: Fred Truman <ftruman@gmail.com>
Date: Tue, 17 Jan 2017 14:55:58 -0500
Subject: [PATCH 24/24] fix unintended switching to DATABASES tab on sidebar
 collapse

---
 .../server-stats/lib/component/index.jsx              | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/internal-packages/server-stats/lib/component/index.jsx b/src/internal-packages/server-stats/lib/component/index.jsx
index 85a7bf5d0fc..5eee14f7a6f 100644
--- a/src/internal-packages/server-stats/lib/component/index.jsx
+++ b/src/internal-packages/server-stats/lib/component/index.jsx
@@ -17,9 +17,17 @@ class RTSSComponent extends React.Component {
    */
   constructor(props) {
     super(props);
+    this.state = {activeTab: 0};
     this.TabNavBar = app.appRegistry.getComponent('App.TabNavBar');
   }
 
+  onTabClicked(idx) {
+    if (this.state.activeTab === idx) {
+      return;
+    }
+    this.setState({activeTab: idx});
+  }
+
   componentDidMount() {
     Actions.restart();
   }
@@ -38,7 +46,8 @@ class RTSSComponent extends React.Component {
           theme="light"
           tabs={['Databases', 'Performance']}
           views={[databasesView, performanceView]}
-          activeTabIndex={0}
+          activeTabIndex={this.state.activeTab}
+          onTabClicked={this.onTabClicked.bind(this)}
           className="rt-nav"
         />
       </div>