PanelEdit: Fix 'Actual' size by passing the correct panel size to DashboardPanel (#37885)

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

@@ -239,17 +239,19 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
                 return <PanelEditorTableView width={width} height={height} panel={panel} dashboard={dashboard} />;
               }
 
+              const panelSize = calculatePanelSize(uiState.mode, width, height, panel);
+
               return (
                 <div className={styles.centeringContainer} style={{ width, height }}>
-                  <div style={calculatePanelSize(uiState.mode, width, height, panel)} data-panelid={panel.editSourceId}>
+                  <div style={panelSize} data-panelid={panel.editSourceId}>
                     <DashboardPanel
                       dashboard={dashboard}
                       panel={panel}
                       isEditing={true}
                       isViewing={false}
                       isInView={true}
-                      width={width}
-                      height={height}
+                      width={panelSize.width}
+                      height={panelSize.height}
                     />
                   </div>
                 </div>

public/app/features/dashboard/components/PanelEditor/utils.ts

@@ -1,11 +1,10 @@
-import { CSSProperties } from 'react';
 import { omit } from 'lodash';
 import { FieldConfigSource, PanelPlugin } from '@grafana/data';
 import { PanelModel } from '../../state/PanelModel';
 import { DisplayMode } from './types';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 
-export function calculatePanelSize(mode: DisplayMode, width: number, height: number, panel: PanelModel): CSSProperties {
+export function calculatePanelSize(mode: DisplayMode, width: number, height: number, panel: PanelModel) {
   if (mode === DisplayMode.Fill) {
     return { width, height };
   }

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

@@ -428,7 +428,6 @@ export class PanelChrome extends Component<Props, State> {
 
     const containerClassNames = classNames({
       'panel-container': true,
-      'panel-container--absolute': true,
       'panel-container--transparent': transparent,
       'panel-container--no-title': this.hasOverlayHeader(),
       [`panel-alert-state--${alertState}`]: alertState !== undefined,

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

@@ -192,7 +192,6 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
 
     const containerClassNames = classNames({
       'panel-container': true,
-      'panel-container--absolute': true,
       'panel-container--transparent': transparent,
       'panel-container--no-title': this.hasOverlayHeader(),
       'panel-has-alert': panel.alert !== undefined,