wip: minopr progress on react panel edit infra

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -53,8 +53,7 @@ export class DashboardPanel extends React.Component<Props, State> {
   }
 
   componentDidUpdate() {
-    // skip loading angular component if we have no element
-    // or we have already loaded it
+    // skip loading angular component if we have no element or we have already loaded it
     if (!this.element || this.angularPanel) {
       return;
     }

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

@@ -52,8 +52,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   onVizTypeChanged = (plugin: PanelPlugin) => {
     this.props.panel.type = plugin.id;
     this.forceUpdate();
-
-    console.log('panel type changed', plugin);
   };
 
   onChangeTab = (tab: PanelEditorTab) => {

public/sass/components/_tabbed_view.scss

@@ -1,5 +1,4 @@
 .tabbed-view {
-  margin-bottom: $dashboard-padding;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -45,8 +44,10 @@
 }
 
 .tabbed-view-body {
-  padding: $spacer*2 $spacer;
-  height: 100%;
+  padding: $spacer*2 $spacer $spacer $spacer;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 
   &--small {
     min-height: 0px;

public/sass/components/_viz_editor.scss

@@ -4,7 +4,7 @@
 }
 
 .viz-editor-col1 {
-  width: 240px;
+  width: 210px;
   height: 100%;
   margin-right: 40px;
 }
@@ -16,14 +16,15 @@
 .viz-picker {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .viz-picker-list {
-  padding: 3px 8px;
+  padding-top: $spacer;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  height: 100%;
+  flex-grow: 1;
 }
 
 .viz-picker__item {
@@ -35,9 +36,10 @@
   width: 100%;
   height: 60px;
   text-align: center;
-  margin: $gf-form-margin;
+  margin-bottom: 6px;
   cursor: pointer;
   display: flex;
+  flex-shrink: 0;
 
   &:hover {
     background: $card-background-hover;
@@ -60,7 +62,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  font-size: $font-size-sm;
+  font-size: $font-size-h5;
   display: flex;
   flex-direction: column;
   align-self: center;