fix: wrap multi-line code blocks in pre tag (#5586)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/components/features/markdown/code.tsx

@@ -17,19 +17,38 @@ export function code({
   const match = /language-(\w+)/.exec(className || ""); // get the language
 
   if (!match) {
+    const isMultiline = String(children).includes("\n");
+
+    if (!isMultiline) {
+      return (
+        <code
+          className={className}
+          style={{
+            backgroundColor: "#2a3038",
+            padding: "0.2em 0.4em",
+            borderRadius: "4px",
+            color: "#e6edf3",
+            border: "1px solid #30363d",
+          }}
+        >
+          {children}
+        </code>
+      );
+    }
+
     return (
-      <code
-        className={className}
+      <pre
         style={{
           backgroundColor: "#2a3038",
-          padding: "0.2em 0.4em",
+          padding: "1em",
           borderRadius: "4px",
           color: "#e6edf3",
           border: "1px solid #30363d",
+          overflow: "auto",
         }}
       >
-        {children}
-      </code>
+        <code className={className}>{String(children).replace(/\n$/, "")}</code>
+      </pre>
     );
   }