refactor: replace <div> tags with <pre> for better JSON body renderin…

…g in LogsViewer component
OneUptime · Jan 29, 2025 · 39596f6 · 39596f6
1 parent 36a181e
commit 39596f6
Showing 1 changed file with 4 additions and 4 deletions.
diff --git 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>