From d351b077954dbd530c2ac9048522dcc6680fc2b3 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 13 Jul 2022 09:38:33 +0200
Subject: [PATCH] Logs: Fixed wrapping log lines from detected fields (#52108)
 (#52131)

* fixed wrap in detected fields

* removed cx

(cherry picked from commit 05ba08fd8b8b71eec9afaa65a949f94bcbc9f799)

Co-authored-by: Sven Grossmann <Svennergr@gmail.com>
---
 .../components/Logs/LogRowMessageDetectedFields.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
index 15415f0a406..51e00ebe3b6 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
@@ -1,4 +1,4 @@
-import { cx, css } from '@emotion/css';
+import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { LogRowModel, Field, LinkModel } from '@grafana/data';
@@ -19,12 +19,11 @@ class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
   render() {
     const { row, showDetectedFields, getFieldLinks, wrapLogMessage } = this.props;
     const fields = getAllFields(row, getFieldLinks);
-    const wrapClassName = cx(
-      wrapLogMessage &&
-        css`
-          white-space: pre-wrap;
-        `
-    );
+    const wrapClassName = wrapLogMessage
+      ? ''
+      : css`
+          white-space: nowrap;
+        `;
 
     const line = showDetectedFields
       .map((parsedKey) => {