From 382b8e85da36ed1a8f235775b883e54f5db90ab7 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Fri, 7 Oct 2016 11:57:05 -0700
Subject: [PATCH] [explore v2] add scrollbar to control panel container (#1284)

* add scroll bars to control panel container

* make query and save-btns block elements

* don't use react component, use custom styles

* move style to stylesheet
---
 .../components/ControlPanelsContainer.jsx     |  8 ++++++--
 .../components/ExploreViewContainer.jsx       |  8 ++++----
 .../components/QueryAndSaveButtons.jsx        | 13 ++++++-------
 .../stylesheets/exploreV2/exploreV2.css       | 19 ++++++++++++++-----
 caravel/templates/caravel/explorev2.html      |  2 +-
 5 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
index a3a0ccbcd2..a4c818af70 100644
--- a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@@ -14,8 +14,12 @@ const defaultProps = {
 function ControlPanelsContainer(props) {
   return (
     <Panel>
-      {DefaultControls}
-      {VIZ_CONTROL_MAPPING[props.vizType]}
+      <div className="scrollbar-container">
+        <div className="scrollbar-content">
+          {DefaultControls}
+          {VIZ_CONTROL_MAPPING[props.vizType]}
+        </div>
+      </div>
     </Panel>
   );
 }
diff --git a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
index 31a11de84c..0541237f19 100644
--- a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -31,16 +31,16 @@ export default class ExploreViewContainer extends React.Component {
           overflow: 'hidden',
         }}
       >
-        <div className="row table-body">
-          <div className="table-cell col-sm-4">
+        <div className="row">
+          <div className="col-sm-4">
             <QueryAndSaveButtons
               canAdd="True"
               onQuery={() => {}}
             />
-            <br /><br />
+            <br />
             <ControlPanelsContainer />
           </div>
-          <div className="table-cell col-sm-8">
+          <div className="col-sm-8">
             <ChartContainer
               viz={this.props.data.viz}
               height={this.state.height}
diff --git a/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx b/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx
index 1a52139340..43b8835475 100644
--- a/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx
+++ b/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx
@@ -7,23 +7,22 @@ const propTypes = {
 };
 
 export default function QueryAndSaveBtns({ canAdd, onQuery }) {
-  const saveClasses = classnames('btn btn-default btn-sm', {
+  const saveClasses = classnames('btn btn-default btn-block btn-sm', {
     'disabled disabledButton': canAdd !== 'True',
   });
 
   return (
-    <div className="btn-group query-and-save">
-      <button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
+    <div className="btn-group btn-group-justified query-and-save">
+      <a className="btn btn-primary btn-block btn-sm" onClick={onQuery}>
         <i className="fa fa-bolt"></i> Query
-      </button>
-      <button
-        type="button"
+      </a>
+      <a
         className={saveClasses}
         data-target="#save_modal"
         data-toggle="modal"
       >
         <i className="fa fa-plus-circle"></i> Save as
-      </button>
+      </a>
     </div>
   );
 }
diff --git a/caravel/assets/stylesheets/exploreV2/exploreV2.css b/caravel/assets/stylesheets/exploreV2/exploreV2.css
index 74de33c7d4..b46e1262ac 100644
--- a/caravel/assets/stylesheets/exploreV2/exploreV2.css
+++ b/caravel/assets/stylesheets/exploreV2/exploreV2.css
@@ -1,8 +1,17 @@
-.table-body {
-  display: table;
+.scrollbar-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
-.table-cell {
-  float: none;
-  display: table-cell;
+.scrollbar-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow: scroll;
+  margin-right: 0px;
+  margin-bottom: 100px;
 }
diff --git a/caravel/templates/caravel/explorev2.html b/caravel/templates/caravel/explorev2.html
index a0644be1d3..679ec83bd9 100644
--- a/caravel/templates/caravel/explorev2.html
+++ b/caravel/templates/caravel/explorev2.html
@@ -1,7 +1,7 @@
 {% extends "caravel/basic.html" %}
-<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/exploreV2.css" />
 
 {% block body %}
+  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/explorev2/explorev2.css">
   <div
     id="js-explore-view-container"
     data-bootstrap="{{ bootstrap_data }}"