diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index e91d3297633..7434e9da348 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -148,9 +148,7 @@ export function PanelChrome({
         </div>
 
         {statusMessage && (
-          <div className={styles.errorContainer}>
-            <PanelStatus message={statusMessage} onClick={statusMessageOnClick} />
-          </div>
+          <PanelStatus className={styles.errorContainer} message={statusMessage} onClick={statusMessageOnClick} />
         )}
       </div>
 
@@ -270,10 +268,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     errorContainer: css({
       label: 'error-container',
       position: 'absolute',
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
+      left: '50%',
+      transform: 'translateX(-50%)',
     }),
     rightAligned: css({
       label: 'right-aligned-container',
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
index 765701e2355..3a61ca6ec7b 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { cx, css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -7,18 +7,19 @@ import { useStyles2 } from '../../themes';
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 
 export interface Props {
+  className?: string;
   message?: string;
   onClick?: (e: React.SyntheticEvent) => void;
 }
 
-export function PanelStatus({ message, onClick }: Props) {
+export function PanelStatus({ className, message, onClick }: Props) {
   const styles = useStyles2(getStyles);
 
   return (
     <ToolbarButton
+      className={cx(className, styles.buttonStyles)}
       onClick={onClick}
       variant={'destructive'}
-      className={styles.buttonStyles}
       icon="exclamation-triangle"
       tooltip={message || ''}
     />