From 5b29949071b0c5c9c74c66decbb8b240175aded1 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 28 May 2025 14:57:04 +0100
Subject: [PATCH] LiveConnectionWarning: Tidy markup and fix 'blocking' issue
 (#106151)

---
 .../features/live/LiveConnectionWarning.tsx   | 46 ++++++++-----------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/public/app/features/live/LiveConnectionWarning.tsx b/public/app/features/live/LiveConnectionWarning.tsx
index f9c0f637fc3..4d761a34767 100644
--- a/public/app/features/live/LiveConnectionWarning.tsx
+++ b/public/app/features/live/LiveConnectionWarning.tsx
@@ -52,36 +52,28 @@ export class LiveConnectionWarning extends PureComponent<Props, State> {
       }
 
       return (
-        <div className={this.styles.foot}>
-          <Alert
-            severity={'warning'}
-            className={this.styles.warn}
-            title={t(
-              'live.live-connection-warning.title-connection-to-server-is-lost',
-              'Connection to server is lost...'
-            )}
-          />
-        </div>
+        <Alert
+          severity={'warning'}
+          className={this.styles.warn}
+          title={t(
+            'live.live-connection-warning.title-connection-to-server-is-lost',
+            'Connection to server is lost...'
+          )}
+        />
       );
     }
     return null;
   }
 }
 
-const getStyle = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    foot: css({
-      position: 'fixed',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: 10000,
-      cursor: 'wait',
-      margin: theme.spacing(2),
-    }),
-    warn: css({
-      maxWidth: '400px',
-      margin: 'auto',
-    }),
-  };
-});
+const getStyle = stylesFactory((theme: GrafanaTheme2) => ({
+  warn: css({
+    position: 'fixed',
+    bottom: 0,
+    left: '50%',
+    transform: 'translate(-50%)',
+    maxWidth: '400px',
+    zIndex: theme.zIndex.portal,
+    cursor: 'wait',
+  }),
+}));