Explore: Remove emotion error when displaying logs (#31026)

* Remove emotion error

* Remove redundant context variable

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -117,7 +117,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
             )}
           </span>
           {showContextToggle?.(row) && (
-            <span onClick={this.onContextToggle} className={cx(style.context)}>
+            <span onClick={this.onContextToggle} className={cx('log-row-context', style.context)}>
               {contextIsOpen ? 'Hide' : 'Show'} context
             </span>
           )}

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;