Use <pre> tag inside JsonView component for consistency

Author: cgoinglove

client/src/components/History.tsx

@@ -75,9 +75,9 @@ const HistoryAndNotifications = ({
                             <Copy size={16} />
                           </button>
                         </div>
-                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                        <div className="bg-background p-2 rounded">
                           <JsonView data={request.request} />
-                        </pre>
+                        </div>
                       </div>
                       {request.response && (
                         <div className="mt-2">
@@ -92,9 +92,9 @@ const HistoryAndNotifications = ({
                               <Copy size={16} />
                             </button>
                           </div>
-                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                          <div className="bg-background p-2 rounded">
                             <JsonView data={request.response} />
-                          </pre>
+                          </div>
                         </div>
                       )}
                     </>
@@ -143,11 +143,11 @@ const HistoryAndNotifications = ({
                           <Copy size={16} />
                         </button>
                       </div>
-                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                      <div className="bg-background p-2 rounded">
                         <JsonView
                           data={JSON.stringify(notification, null, 2)}
                         />
-                      </pre>
+                      </div>
                     </div>
                   )}
                 </li>

client/src/components/JsonView.tsx

@@ -71,7 +71,7 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600 break-all",
+      string: "text-green-600 break-all whitespace-pre-wrap",
       default: "text-gray-700",
     };
 
@@ -174,7 +174,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <p className={typeStyleMap.string}>"{value}"</p>
+            <pre className={typeStyleMap.string}>"{value}"</pre>
           </div>
         );
       }
@@ -186,7 +186,7 @@ const JsonNode = memo(
               {name}:
             </span>
           )}
-          <span
+          <pre
             className={clsx(
               typeStyleMap.string,
               "cursor-pointer group-hover:text-green-500",
@@ -195,7 +195,7 @@ const JsonNode = memo(
             title={isExpanded ? "Click to collapse" : "Click to expand"}
           >
             {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
-          </span>
+          </pre>
         </div>
       );
     };

client/src/components/ResourcesTab.tsx

@@ -215,9 +215,9 @@ const ResourcesTab = ({
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           ) : selectedResource ? (
-            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100">
               <JsonView data={resourceContent} />
-            </pre>
+            </div>
           ) : selectedTemplate ? (
             <div className="space-y-4">
               <p className="text-sm text-gray-600">

client/src/components/SamplingTab.tsx

@@ -44,9 +44,9 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
         <h3 className="text-lg font-semibold">Recent Requests</h3>
         {pendingRequests.map((request) => (
           <div key={request.id} className="p-4 border rounded-lg space-y-4">
-            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
+            <div className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
               <JsonView data={JSON.stringify(request.request)} />
-            </pre>
+            </div>
             <div className="flex space-x-2">
               <Button onClick={() => handleApprove(request.id)}>Approve</Button>
               <Button variant="outline" onClick={() => onReject(request.id)}>