diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index cc6c6ea409e..c1fcc9931ca 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
@@ -218,12 +218,11 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     updatePanelEditorUIState({ isPanelOptionsVisible: !uiState.isPanelOptionsVisible });
   };
 
-  renderPanel = (styles: EditorStyles) => {
-    const { dashboard, panel, uiState, plugin, tab, tableViewEnabled } = this.props;
-    const tabs = getPanelEditorTabs(tab, plugin);
+  renderPanel(styles: EditorStyles, noTabsBelow: boolean) {
+    const { dashboard, panel, uiState, tableViewEnabled } = this.props;
 
     return (
-      <div className={cx(styles.mainPaneWrapper, tabs.length === 0 && styles.mainPaneWrapperNoTabs)} key="panel">
+      <div className={styles.mainPaneWrapper} key="panel">
         {this.renderPanelToolbar(styles)}
         <div className={styles.panelWrapper}>
           <AutoSizer>
@@ -232,6 +231,11 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
                 return null;
               }
 
+              // If no tabs limit height so panel does not extend to edge
+              if (noTabsBelow) {
+                height -= config.theme2.spacing.gridSize * 2;
+              }
+
               if (tableViewEnabled) {
                 return <PanelEditorTableView width={width} height={height} panel={panel} dashboard={dashboard} />;
               }
@@ -256,7 +260,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         </div>
       </div>
     );
-  };
+  }
 
   renderPanelAndEditor(styles: EditorStyles) {
     const { panel, dashboard, plugin, tab } = this.props;
@@ -264,7 +268,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
     if (tabs.length > 0) {
       return [
-        this.renderPanel(styles),
+        this.renderPanel(styles, false),
         <div
           className={styles.tabsWrapper}
           aria-label={selectors.components.PanelEditor.DataPane.content}
@@ -274,7 +278,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         </div>,
       ];
     }
-    return this.renderPanel(styles);
+
+    return this.renderPanel(styles, true);
   }
 
   renderTemplateVariables(styles: EditorStyles) {
@@ -494,9 +499,6 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       width: 100%;
       padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing};
     `,
-    mainPaneWrapperNoTabs: css`
-      padding-bottom: ${paneSpacing};
-    `,
     variablesWrapper: css`
       label: variablesWrapper;
       display: flex;
@@ -527,6 +529,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       display: flex;
       justify-content: center;
       align-items: center;
+      position: relative;
     `,
   };
 });