better layout for the visualisation editor

client/app/assets/less/redash/query.less

@@ -457,6 +457,32 @@ edit-in-place p.editable:hover {
 }
 
 
+// Visualization editor
+.modal-xl .modal-content {
+  border: none;
+}
+
+.visualization-editor {
+  .modal-body {
+    bottom: 50px;
+  }
+
+  .modal-footer {
+    height: auto;
+    background: fade(@redash-gray, 6%);
+  }
+
+  .visualization-editor__right {
+    margin-top: 23px;
+
+    .parameter-container {
+      padding-left: 25px;
+      margin-top: 10px;
+    }
+  }
+}
+
+
 // Left nav fixes for filling all the space
 nav .rg-bottom {
   visibility: hidden;

client/app/visualizations/edit-visualization-dialog.html

@@ -1,4 +1,4 @@
-<div>
+<div class="visualization-editor">
   <div class="modal-header">
     <button type="button" class="close" aria-label="Close" ng-click="$ctrl.closeDialog()"><span aria-hidden="true">&times;</span>
     </button>
@@ -6,7 +6,7 @@
   </div>
   <div class="modal-body">
     <div class="row">
-      <div class="col-md-5 p-r-5">
+      <div class="col-md-5 p-r-10 p-l-0">
         <div>
           <form name="$ctrl.visForm">
             <div class="form-group">
@@ -30,7 +30,7 @@
           </form>
         </div>
       </div>
-      <div class="col-md-7" style="border: 1px solid #eee;">
+      <div class="col-md-7 p-0 visualization-editor__right" style="border: 1px solid #eee;">
         <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult"></visualization-renderer>
       </div>
     </div>