LogRow: Fixed background-height when hovering and label-alignment (#51027)

* fixed logline's hover-height difference

* vertically aligned log-labels

* moved labelalignment to cells

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;