From efe214a293b173c8230dbd5a3ec1c4f52f41d771 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Thu, 13 Oct 2022 11:42:40 +0200
Subject: [PATCH] LogContext: Change line highlighting to match the hover state
 (#56811)

* add hover background also to logs with context

* add inherit display
---
 public/app/features/logs/components/LogRow.tsx         | 1 +
 public/app/features/logs/components/LogRowMessage.tsx  | 1 +
 public/app/features/logs/components/getLogRowStyles.ts | 9 +++++----
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index c6fdaa94c5d..2d65bb0b63f 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/public/app/features/logs/components/LogRow.tsx
@@ -166,6 +166,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
     const { errorMessage, hasError } = checkLogsError(row);
     const logRowBackground = cx(style.logsRow, {
       [styles.errorLogRow]: hasError,
+      [style.contextBackground]: showContext,
     });
 
     const processedRow =
diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index 046b5116898..4129c741630 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -44,6 +44,7 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
       label: rowWithContext;
       z-index: 1;
       outline: 9999px solid ${outlineColor};
+      display: inherit;
     `,
     horizontalScroll: css`
       label: verticalScroll;
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index a1c2bbda54a..1ef851e803d 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -45,6 +45,9 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
       font-size: ${theme.typography.bodySmall.fontSize};
       width: 100%;
     `,
+    contextBackground: css`
+      background: ${hoverBgColor};
+    `,
     logsRow: css`
       label: logs-row;
       width: 100%;
@@ -56,6 +59,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
           visibility: visible;
           z-index: 1;
         }
+
+        background: ${hoverBgColor};
       }
 
       td:not(.log-row-menu-cell):last-child {
@@ -69,10 +74,6 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
         border-bottom: 1px solid transparent;
         height: 100%;
       }
-
-      &:hover {
-        background: ${hoverBgColor};
-      }
     `,
     logsRowDuplicates: css`
       label: logs-row__duplicates;