From 99a4b926818abe569c5c7e1d48d69f8a8defa79a Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Wed, 26 Feb 2020 14:38:05 -0300
Subject: [PATCH 1/2] Change visualization editor scroll to internal divs

---
 .../components/EditVisualizationDialog.jsx     | 15 ++++++++-------
 .../components/EditVisualizationDialog.less    | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 client/app/visualizations/components/EditVisualizationDialog.less

diff --git a/client/app/visualizations/components/EditVisualizationDialog.jsx b/client/app/visualizations/components/EditVisualizationDialog.jsx
index ad94e26652..112223ec74 100644
--- a/client/app/visualizations/components/EditVisualizationDialog.jsx
+++ b/client/app/visualizations/components/EditVisualizationDialog.jsx
@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import Modal from "antd/lib/modal";
 import Select from "antd/lib/select";
 import Input from "antd/lib/input";
-import * as Grid from "antd/lib/grid";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import ErrorBoundary, { ErrorMessage } from "@/components/ErrorBoundary";
 import Filters, { filterData } from "@/components/Filters";
@@ -15,6 +14,8 @@ import getQueryResultData from "@/lib/getQueryResultData";
 import { VisualizationType } from "@/visualizations/prop-types";
 import registeredVisualizations, { getDefaultVisualization, newVisualization } from "@/visualizations";
 
+import "./EditVisualizationDialog.less";
+
 function updateQueryVisualizations(query, visualization) {
   const index = findIndex(query.visualizations, v => v.id === visualization.id);
   if (index > -1) {
@@ -157,8 +158,8 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
       onOk={save}
       onCancel={dismiss}
       wrapProps={{ "data-test": "EditVisualizationDialog" }}>
-      <Grid.Row gutter={24}>
-        <Grid.Col span={24} md={10}>
+      <div className="edit-visualization-dialog">
+        <div className="visualization-settings">
           <div className="m-b-15">
             <label htmlFor="visualization-type">Visualization Type</label>
             <Select
@@ -188,8 +189,8 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
           <div data-test="VisualizationEditor">
             <Editor data={data} options={options} visualizationName={name} onOptionsChange={onOptionsChanged} />
           </div>
-        </Grid.Col>
-        <Grid.Col span={24} md={14}>
+        </div>
+        <div className="visualization-preview">
           <label htmlFor="visualization-preview" className="invisible hidden-xs">
             Preview
           </label>
@@ -207,8 +208,8 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
               />
             </ErrorBoundary>
           </div>
-        </Grid.Col>
-      </Grid.Row>
+        </div>
+      </div>
     </Modal>
   );
 }
diff --git a/client/app/visualizations/components/EditVisualizationDialog.less b/client/app/visualizations/components/EditVisualizationDialog.less
new file mode 100644
index 0000000000..0a3e2c91d3
--- /dev/null
+++ b/client/app/visualizations/components/EditVisualizationDialog.less
@@ -0,0 +1,18 @@
+@media (min-width: 992px) {
+  .edit-visualization-dialog {
+    display: flex;
+    height: 100%;
+
+    .visualization-settings {
+      padding: 0px 12px;
+      width: 40%;
+      overflow: auto;
+    }
+
+    .visualization-preview {
+      padding: 0px 12px;
+      width: 60%;
+      overflow: auto;
+    }
+  }
+}

From 0b52d3eefeba8ae31c611046d7546a20cb0faf7a Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Wed, 26 Feb 2020 15:58:49 -0300
Subject: [PATCH 2/2] Fix alignment issue

---
 .../visualizations/components/EditVisualizationDialog.less    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/visualizations/components/EditVisualizationDialog.less b/client/app/visualizations/components/EditVisualizationDialog.less
index 0a3e2c91d3..f9787532f9 100644
--- a/client/app/visualizations/components/EditVisualizationDialog.less
+++ b/client/app/visualizations/components/EditVisualizationDialog.less
@@ -4,13 +4,13 @@
     height: 100%;
 
     .visualization-settings {
-      padding: 0px 12px;
+      padding-right: 12px;
       width: 40%;
       overflow: auto;
     }
 
     .visualization-preview {
-      padding: 0px 12px;
+      padding-left: 12px;
       width: 60%;
       overflow: auto;
     }