New panel edit: support scrolling (#22026)

* Make new edit work again

* Add custom scrolls

* better merge

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme, PanelData, LoadingState, DefaultTimeRange, PanelEvents } from '@grafana/data';
-import { stylesFactory, Forms } from '@grafana/ui';
+import { stylesFactory, Forms, CustomScrollbar } from '@grafana/ui';
 import config from 'app/core/config';
 
 import { PanelModel } from '../../state/PanelModel';
@@ -52,6 +52,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         cursor: row-resize;
       `
     ),
+    noScrollPaneContent: css`
+      height: 100%;
+      overflow: hidden;
+    `,
   };
 });
 
@@ -171,8 +175,9 @@ export class PanelEditor extends PureComponent<Props, State> {
         </div>
         <SplitPane
           split="vertical"
+          primary="second"
           minSize={50}
-          defaultSize={'80%'}
+          defaultSize={350}
           resizerClassName={styles.resizerV}
           onDragStarted={() => (document.body.style.cursor = 'col-resize')}
           onDragFinished={this.onDragFinished}
@@ -180,7 +185,8 @@ export class PanelEditor extends PureComponent<Props, State> {
           <SplitPane
             split="horizontal"
             minSize={50}
-            defaultSize={'60%'}
+            primary="second"
+            defaultSize="40%"
             resizerClassName={styles.resizerH}
             onDragStarted={() => (document.body.style.cursor = 'row-resize')}
             onDragFinished={this.onDragFinished}
@@ -195,12 +201,14 @@ export class PanelEditor extends PureComponent<Props, State> {
                 isInView={true}
               />
             </div>
-            <div>
+            <div className={styles.noScrollPaneContent}>
               <QueriesTab panel={dirtyPanel} dashboard={dashboard} />
             </div>
           </SplitPane>
-          <div>
-            <div>TODO: viz settings</div>
+          <div className={styles.noScrollPaneContent}>
+            <CustomScrollbar>
+              <div>Viz settings</div>
+            </CustomScrollbar>
           </div>
         </SplitPane>
       </div>

public/sass/components/_panel_editor.scss

@@ -65,6 +65,8 @@
   min-width: 0;
   display: flex;
   min-height: 0;
+  height: 100%;
+  overflow: hidden;
 }
 
 .panel-editor__content {