From 9a7acc9fd296c92ddea3f09c4d9bf6dc8d6c8f96 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 14 Jul 2022 10:53:48 +0200
Subject: [PATCH] Logs: Fixed LogContext being underneath the table (#52165)
 (#52202)

(cherry picked from commit 63776d5a0e3b54bcde4b4dfc09ee5058ba66d8aa)

Co-authored-by: Sven Grossmann <Svennergr@gmail.com>
---
 packages/grafana-ui/src/components/Logs/LogRowMessage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
index a1a328eb045..8f48ff45249 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
@@ -123,7 +123,9 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
     const styles = getStyles(theme);
 
     return (
-      <td className={style.logsRowMessage}>
+      // When context is open, the position has to be NOT relative.
+      // Setting the postion as inline-style to overwrite the more sepecific style definition from `style.logsRowMessage`.
+      <td style={contextIsOpen ? { position: 'unset' } : undefined} className={style.logsRowMessage}>
         <div
           className={cx({ [styles.positionRelative]: wrapLogMessage }, { [styles.horizontalScroll]: !wrapLogMessage })}
         >