From afabb77d8e086ce0e476519a4a617cbcce403299 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Mon, 30 Jun 2025 20:54:56 +0100
Subject: [PATCH] LogLine: improve hover and selected state

---
 public/app/features/logs/components/panel/LogLine.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/app/features/logs/components/panel/LogLine.tsx b/public/app/features/logs/components/panel/LogLine.tsx
index 8fa4fd4d672..81088f026a3 100644
--- a/public/app/features/logs/components/panel/LogLine.tsx
+++ b/public/app/features/logs/components/panel/LogLine.tsx
@@ -192,7 +192,7 @@ const LogLineComponent = memo(
           {/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu  */}
           {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
           <div
-            className={`${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''} ${enableLogDetails ? styles.clickable : ''}`}
+            className={`${styles.fieldsWrapper} ${detailsShown ? styles.detailsDisplayed : ''} ${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''} ${enableLogDetails ? styles.clickable : ''}`}
             style={
               collapsed && virtualization
                 ? { maxHeight: `${virtualization.getTruncationLineCount() * virtualization.getLineHeight()}px` }
@@ -541,6 +541,11 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
         marginRight: 0,
       },
     }),
+    fieldsWrapper: css({
+      '&:hover': {
+        background: theme.isDark ? `hsla(0, 0%, 0%, 0.3)` : `hsla(0, 0%, 0%, 0.1)`,
+      },
+    }),
     collapsedLogLine: css({
       overflow: 'hidden',
     }),