improvement: Wrap output for lists and dictionaries (#2995)

## 📝 Summary

Completes #2977.

## 🔍 Description of Changes

Add switch to wrap text for list and dictionary (JSON) outputs. Makes it
easier to read long string outputs 🙂

Before:

<img width="847" alt="Screenshot 2024-11-27 at 10 25 32 PM"
src="https://github.com/user-attachments/assets/b6d4c7e2-8293-4e5d-ad18-b220b83751a5">

After:

<img width="836" alt="Screenshot 2024-11-27 at 10 25 16 PM"
src="https://github.com/user-attachments/assets/e0cba359-a9a0-4b8a-b68b-a23175464a9b">

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

## 📜 Reviewers

@akshayka OR @mscolnick

Author: Wasim

frontend/src/components/editor/output/JsonOutput.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { memo } from "react";
+import { memo, useState } from "react";
 import {
   type DataType,
   JsonViewer,
@@ -45,7 +45,7 @@ export const JsonOutput: React.FC<Props> = memo(
       case "tree":
         return (
           <JsonViewer
-            className={"marimo-json-output"}
+            className="marimo-json-output"
             rootName={name}
             theme={theme}
             value={data}
@@ -75,6 +75,23 @@ function inferBestFormat(data: unknown): "tree" | "raw" {
   return typeof data === "object" && data !== null ? "tree" : "raw";
 }
 
+// Text with length > 500 is collapsed by default, and can be expanded by clicking on it.
+const CollapsibleTextOutput = (props: { text: string }) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  return (
+    <span className="cursor-pointer">
+      {isCollapsed ? (
+        <span onClick={() => setIsCollapsed(false)}>
+          {props.text.slice(0, 500)}
+          {props.text.length > 500 && "..."}
+        </span>
+      ) : (
+        <span onClick={() => setIsCollapsed(true)}>{props.text}</span>
+      )}
+    </span>
+  );
+};
+
 /**
  * Map from mimetype-prefix to render function.
  *
@@ -84,7 +101,7 @@ const LEAF_RENDERERS = {
   "image/": (value: string) => <ImageOutput src={value} />,
   "video/": (value: string) => <VideoOutput src={value} />,
   "text/html": (value: string) => <HtmlOutput html={value} inline={true} />,
-  "text/plain": (value: string) => <TextOutput text={value} />,
+  "text/plain": (value: string) => <CollapsibleTextOutput text={value} />,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -131,6 +148,6 @@ function renderLeaf(
   try {
     return render(leafData(leaf));
   } catch {
-    return <TextOutput text={"Invalid leaf: {leaf}"} />;
+    return <TextOutput text={`Invalid leaf: ${leaf}`} />;
   }
 }

frontend/src/components/editor/output/Outputs.css

@@ -55,16 +55,13 @@
 .marimo-json-output {
   padding-top: 2px;
   padding-bottom: 2px;
-
   /* content-visibility is set by material UI;
    * when set on an element that has overflow auto, causes abrupt jumps when
    * scrolling in Chrome */
   content-visibility: unset;
-
   /* Coarse hack to stop children from overflowing; doesn't seem to affect
    * margin collapse. */
   overflow: auto;
-
   @apply text-xs;
 }