diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index e4909bd1527..d335a575b66 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;