LogLine: improve hover and selected state

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',
     }),