From 39596f6a42145a037a842f1c8f27bb3741a37f4d Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Wed, 29 Jan 2025 18:35:13 +0000
Subject: [PATCH] refactor: replace <div> tags with <pre> for better JSON body
 rendering in LogsViewer component

---
 Common/UI/Components/LogsViewer/LogItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Common/UI/Components/LogsViewer/LogItem.tsx b/Common/UI/Components/LogsViewer/LogItem.tsx
index ce573379e6..0f6922b60f 100644
--- a/Common/UI/Components/LogsViewer/LogItem.tsx
+++ b/Common/UI/Components/LogsViewer/LogItem.tsx
@@ -112,7 +112,7 @@ const LogItem: FunctionComponent<ComponentProps> = (
         )}
 
         <div className={`${bodyColor} courier-prime`}>
-          {isBodyInJSON && <div>{logBody}</div>}
+          {isBodyInJSON && <pre className="whitespace-pre-wrap">{logBody}</pre>}
           {!isBodyInJSON && props.log.body?.toString()}
         </div>
       </div>
@@ -215,7 +215,7 @@ const LogItem: FunctionComponent<ComponentProps> = (
           )}
         </div>
         {isBodyInJSON && (
-          <div className={`${bodyColor} courier-prime`}>{logBody}</div>
+          <pre className={`${bodyColor} courier-prime whitespace-pre-wrap`}>{logBody}</pre>
         )}
       </div>
 
@@ -250,13 +250,13 @@ const LogItem: FunctionComponent<ComponentProps> = (
               ATTRIBUTES:
             </div>
           </div>
-          <div className={`${bodyColor} courier-prime`}>
+          <pre className={`${bodyColor} courier-prime whitespace-pre-wrap`}>
             {JSON.stringify(
               JSONFunctions.unflattenObject(props.log.attributes || {}),
               null,
               2,
             )}
-          </div>
+          </pre>
         </div>
       )}
     </div>