From 2987020d83109e8f3d0fb49df96d42d99f98b9e1 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 20 Jun 2022 05:23:41 -0400
Subject: [PATCH] LogRow: Fixed background-height when hovering and
 label-alignment (#51027) (#51101)

* fixed logline's hover-height difference

* vertically aligned log-labels

* moved labelalignment to cells

(cherry picked from commit e350cc1d7bccc24fb887079ec69b5fca58e63b56)

Co-authored-by: Sven Grossmann <Svennergr@gmail.com>
---
 .../grafana-ui/src/components/Logs/getLogRowStyles.ts     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
index dd62a125e53..361f4d1c3e0 100644
--- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
@@ -75,6 +75,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
       }
 
       > td {
+        position: relative;
         padding-right: ${theme.spacing(1)};
         border-top: ${theme.v1.border.width.sm} solid transparent;
         border-bottom: ${theme.v1.border.width.sm} solid transparent;
@@ -93,7 +94,6 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
     `,
     logsRowLevel: css`
       label: logs-row__level;
-      position: relative;
       max-width: 10px;
       cursor: default;
       &::after {
@@ -112,7 +112,6 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
     `,
     logsRowToggleDetails: css`
       label: logs-row-toggle-details__level;
-      position: relative;
       font-size: 9px;
       padding-top: 5px;
       max-width: 15px;
@@ -125,6 +124,11 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
       label: logs-row__labels;
       white-space: nowrap;
       max-width: 22em;
+
+      /* This is to make the labels vertical align */
+      > span {
+        margin-top: 0.75px;
+      }
     `,
     logsRowMessage: css`
       label: logs-row__message;