diff --git a/src/browser/components/ClickableUrls.tsx b/src/browser/components/ClickableUrls.tsx
index ed1685250db..92d1766a75b 100644
--- a/src/browser/components/ClickableUrls.tsx
+++ b/src/browser/components/ClickableUrls.tsx
@@ -22,7 +22,7 @@ const URL_REGEX = /(?:https?|s?ftp|bolt):\/\/(?:(?:[^\s()<>]+|\((?:[^\s()<>]+|(?
 
 interface ClickableUrlsProps {
   text?: string | null
-  WrappingTag?: keyof JSX.IntrinsicElements
+  WrappingTag?: keyof JSX.IntrinsicElements | React.ElementType
 }
 
 export default function ClickableUrls({
diff --git a/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts b/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
index 1517fa907ca..41b0a573ca3 100644
--- a/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
+++ b/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
@@ -50,3 +50,7 @@ export const StyledJsonPre = styled.pre`
   max-width: 500px;
   white-space: pre-wrap;
 `
+
+export const StyledPreSpan = styled.span`
+  white-space: pre;
+`
diff --git a/src/browser/modules/Stream/CypherFrame/relatable-view.tsx b/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
index 42051557244..7a9e814ed19 100644
--- a/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
+++ b/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
@@ -35,7 +35,11 @@ import { stringModifier } from 'services/bolt/cypherTypesFormatting'
 import ClickableUrls from '../../../components/ClickableUrls'
 import { StyledStatsBar, StyledTruncatedMessage } from '../styled'
 import Ellipsis from '../../../components/Ellipsis'
-import { RelatableStyleWrapper, StyledJsonPre } from './relatable-view.styled'
+import {
+  RelatableStyleWrapper,
+  StyledJsonPre,
+  StyledPreSpan
+} from './relatable-view.styled'
 import { stringifyMod, unescapeDoubleQuotesForDisplay } from 'services/utils'
 import { GlobalState } from 'shared/globalState'
 
@@ -93,12 +97,12 @@ function CypherCell({ cell }: any) {
 const renderCell = (entry: any) => {
   if (Array.isArray(entry)) {
     const children = entry.map((item, index) => (
-      <span key={index}>
+      <StyledPreSpan key={index}>
         {renderCell(item)}
         {index === entry.length - 1 ? null : ', '}
-      </span>
+      </StyledPreSpan>
     ))
-    return <span>[{children}]</span>
+    return <StyledPreSpan>[{children}]</StyledPreSpan>
   } else if (typeof entry === 'object') {
     return renderObject(entry)
   } else {
@@ -107,6 +111,7 @@ const renderCell = (entry: any) => {
         text={unescapeDoubleQuotesForDisplay(
           stringifyMod(entry, stringModifier, true)
         )}
+        WrappingTag={StyledPreSpan}
       />
     )
   }
@@ -119,7 +124,7 @@ const renderObject = (entry: any) => {
       text={unescapeDoubleQuotesForDisplay(
         stringifyMod(entry, stringModifier, true)
       )}
-      WrappingTag={StyledJsonPre as any}
+      WrappingTag={StyledJsonPre}
     />
   )
 }