diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e0e1cb1e..2ebaa9862 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss index d558f53c3..1e74b592e 100644 --- a/ui/src/style/components/ceo-display-options.scss +++ b/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; } diff --git a/ui/src/style/pages/overlay-technology.scss b/ui/src/style/pages/overlay-technology.scss index 706256249..bb02ff605 100644 --- a/ui/src/style/pages/overlay-technology.scss +++ b/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 {