Change visualization editor scroll to internal divs (#4689)

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>
   );
 }

client/app/visualizations/components/EditVisualizationDialog.less

@@ -0,0 +1,18 @@
+@media (min-width: 992px) {
+  .edit-visualization-dialog {
+    display: flex;
+    height: 100%;
+
+    .visualization-settings {
+      padding-right: 12px;
+      width: 40%;
+      overflow: auto;
+    }
+
+    .visualization-preview {
+      padding-left: 12px;
+      width: 60%;
+      overflow: auto;
+    }
+  }
+}