Merge pull request #1846 from influxdata/embiggen-ceo

Make lower half of CEO flush to the viewport

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Features
 
 ### UI Improvements
+1. [#1846](https://github.com/influxdata/chronograf/pull/1846): Increase screen real estate of Query Maker in the Cell Editor Overlay
 
 ## v1.3.6.0 [2017-08-08]
 ### Bug Fixes

ui/src/style/components/ceo-display-options.scss

@@ -4,11 +4,9 @@
 */
 .display-options {
   height: 100%;
-  margin: 0 60px;
   display: flex;
   background-color: $g2-kevlar;
-  padding: 0 8px 8px 8px;
-  border-radius: 0 0 4px 4px;
+  padding: 0 18px 8px 18px;
   flex-wrap: nowrap;
   align-items: stretch;
 }

ui/src/style/pages/overlay-technology.scss

@@ -3,7 +3,7 @@
   ------------------------------------------------------
 */
 
-$overlay-controls-height: 50px;
+$overlay-controls-height: 60px;
 $overlay-controls-bg: $g2-kevlar;
 $overlay-z: 100;
 
@@ -33,17 +33,16 @@ $overlay-z: 100;
   }
 
   .overlay-controls {
-    padding: 0 16px;
+    padding: 0 18px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex: 0 0 $overlay-controls-height;
-    width: calc(100% - #{($page-wrapper-padding * 2)});
-    left: $page-wrapper-padding;
+    width: 100%;
+    left: 0;
     border: 0;
     background-color: $g2-kevlar;
-    border-radius: $radius $radius 0 0;
   }
   .overlay-controls--right {
     display: flex;
@@ -74,7 +73,9 @@ $overlay-z: 100;
   flex-direction: column;
   align-items: stretch;
   height: 100%;
-  padding: 16px 0;
+}
+.overlay-technology--editor .query-maker--empty {
+  margin-bottom: 8px;
 }
 .overlay-controls .confirm-buttons {
   margin-left: 32px;
@@ -86,8 +87,8 @@ $overlay-z: 100;
 }
 .overlay-technology .query-maker {
   flex: 1 0 0;
-  padding: 0 8px;
-  border-radius: 0 0 $radius $radius;
+  padding: 0 18px;
+  margin: 0;
   background-color: $g2-kevlar;
 }
 .overlay-technology .query-maker--tabs {