From 1728f2c5e2863474ae33b22f543a2ea725f33eb9 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 28 Nov 2018 15:43:44 -0800
Subject: [PATCH] Improve display of Flux Wizard on small screens

---
 CHANGELOG.md                                             | 2 +-
 .../shared/components/TimeMachine/FluxScriptWizard.scss  | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c8bff2cd..654201a06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
 1. [4854](https://github.com/influxdata/chronograf/pull/4854): Update functions list for Flux 0.7.1
 1. [4846](https://github.com/influxdata/chronograf/pull/4846): Fix missing data and type in refreshing graph
 1. [4861](https://github.com/influxdata/chronograf/pull/4861): Fix logs stuck in loading state
-
+1. [4847](https://github.com/influxdata/chronograf/pull/4847): Improve display of Flux Wizard on small screens
 
 ### UI Improvements
 1. [#4809](https://github.com/influxdata/chronograf/pull/4809): Add loading spinners while fetching protoboards
diff --git a/ui/src/shared/components/TimeMachine/FluxScriptWizard.scss b/ui/src/shared/components/TimeMachine/FluxScriptWizard.scss
index a76e8d524..e72e742cb 100644
--- a/ui/src/shared/components/TimeMachine/FluxScriptWizard.scss
+++ b/ui/src/shared/components/TimeMachine/FluxScriptWizard.scss
@@ -27,6 +27,9 @@
   background-color: $g3-castle;
   padding: 10px 15px;
   z-index: 200;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
 
   .form--element {
     margin-bottom: 15px;
@@ -44,6 +47,10 @@
   margin-bottom: 20px;
 }
 
+.flux-script-wizard--wizard-body {
+  overflow: scroll;
+}
+
 .flux-script-wizard--close {
   cursor: pointer;
   font-size: 34px;
@@ -51,7 +58,7 @@
   line-height: 18px;
   position: absolute;
   right: 30px;
-  top: 0;
+  top: 8px;
 }
 
 .flux-script-wizard--bg-hint {