diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx index 5233d5949a1..217eb08d5a5 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx @@ -117,7 +117,7 @@ class UnThemedLogRowMessage extends PureComponent { )} {showContextToggle?.(row) && ( - + {contextIsOpen ? 'Hide' : 'Show'} context )} diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index 259bf353508..96e01f117ba 100644 --- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts +++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts @@ -7,13 +7,6 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo let logColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray2; const hoverBgColor = styleMixins.hoverColor(theme.colors.panelBg, theme); - const context = css` - label: context; - visibility: hidden; - white-space: nowrap; - position: relative; - `; - switch (logLevel) { case LogLevel.crit: case LogLevel.critical: @@ -61,7 +54,12 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo label: logs-rows__horizontal-scroll; overflow: auto; `, - context: context, + context: css` + label: context; + visibility: hidden; + white-space: nowrap; + position: relative; + `, logsRow: css` label: logs-row; width: 100%; @@ -69,7 +67,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo vertical-align: top; &:hover { - .${context} { + .log-row-context { visibility: visible; z-index: 1; margin-left: 10px;