break: markdown width clamped for more readable typography (#4551)

Fixes #4548 

This is a stylistic breaking change. We previously would make the output
100% regardless of whether it was markdown or not.

Now: we make the output 100% width only for non-markdown. Markdown has
it's own `max-width` set to `65ch` from the [tailwind
typography](https://github.com/tailwindlabs/tailwindcss-typography)
defaults.

This can be unset via custom css in [app
config](https://docs.marimo.io/guides/configuration/theming/), user
config, or project config. To unset this add the css:

```css
.markdown {
  max-width: unset !important;
}
```

------

<img width="1800" alt="image"
src="https://github.com/user-attachments/assets/6c5db7fd-afb9-40cd-88c3-6f5006ef7042"
/>


-------

This is inline with how Observable does it as well (thanks to @manzt for
pointing this out to me ealier this week unrelated to #4548)

---------

Co-authored-by: Akshay Agrawal <akshay@marimo.io>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

docs/_static/example-thumbs/Screenshot 2025-04-15 at 8.15.03 AM.png

@@ -8,6 +8,15 @@ To include a custom CSS file, in the configuration dropdown, add the relative fi
 app = marimo.App(css_file="custom.css")
 ```
 
+## Theming at the project level
+
+You may also set the `custom_css` field in your project configuration to apply a custom CSS file. This theme won't be applied if the notebook is shared with someone else, but it will be applied to all notebooks open inside the project.
+
+```toml title="pyproject.toml"
+[tool.marimo.display]
+custom_css = ["additional.css"]
+```
+
 ## CSS Variables
 
 We support only a few CSS variables as part of the "public API" for theming. These are:
@@ -64,12 +73,12 @@ You can target a cell's styles from the `data-cell-name` attribute. You can also
 
 ```css
 /* Target the cell named "My Cell" */
-[data-cell-name="my_cell"] {
+[data-cell-name='my_cell'] {
   background-color: light-dark(navy, pink);
 }
 
 /* Target the output of the cell named "My Cell" */
-[data-cell-name="my_cell"] [data-cell-role="output"] {
+[data-cell-name='my_cell'] [data-cell-role='output'] {
   background-color: light-dark(navy, pink);
 }
 ```

docs/guides/configuration/theming.md

@@ -26,6 +26,24 @@
   max-width: 100%;
 }
 
+.output {
+  /* Unset max-width on .markdown. Instead, we will apply
+  to individual elements so it does not affect UI elements in markdown. */
+  .markdown {
+    max-width: unset;
+
+    > pre,
+    > ul,
+    div.codehilite,
+    /* Target <span> that is not empty and does not consist entirely of child elements;
+     * this makes sure text with embedded HTML (such as a slider) has a max width,
+     * but standalone elements (like tables, plots) don't get a max width. */
+      > span.paragraph:not(:has(> :only-child)):not(:empty) {
+      max-width: var(--markdown-max-width);
+    }
+  }
+}
+
 .stdout,
 .stderr,
 .marimo-error {

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

@@ -44,6 +44,8 @@
     --text-font: var(--marimo-text-font, "PT Sans", sans-serif);
     --heading-font: var(--marimo-heading-font, "Lora", serif);
     --radius: 8px;
+    /* stylelint-disable-next-line unit-allowed-list */
+    --markdown-max-width: 80ch;
 
     /* Radix light colors: https://github.com/radix-ui/colors/blob/main/src/light.ts */
 

frontend/src/css/globals.css

@@ -6,6 +6,7 @@
   font-size: 110%;
   line-height: inherit;
   text-indent: 0;
+  max-width: var(--markdown-max-width);
 }
 
 .katex * {

frontend/src/css/katex.min.css

@@ -12,7 +12,7 @@
 }
 
 .markdown h1 {
-  text-align: center;
+  text-align: start;
 }
 
 .config-width-full .markdown h1 {

frontend/src/css/md.css

@@ -38,7 +38,7 @@ def stop(predicate: bool, output: Optional[object] = None) -> None:
         ```
 
     Raises:
-        MarimoStopError: When `predicate` is `True`, raises a `MarimoStopError`.
+        MarimoStopError: When `predicate` is `True`
     """
     if predicate:
         raise MarimoStopError(output)

marimo/_runtime/control_flow.py

@@ -0,0 +1,41 @@
+
+
+import marimo
+
+__generated_with = "0.12.9"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+    md = mo.md(
+        "> long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here long text goes here"
+    )
+    md
+    return md, mo
+
+
+@app.cell
+def _():
+    import polars as pl
+
+    pl.DataFrame({"A": [1, 2, 3]})
+    return
+
+
+@app.cell
+def _(md, mo):
+    mo.vstack([md])
+    return
+
+
+@app.cell
+def _(md, mo):
+    mo.vstack([mo.hstack([md])])
+    return
+
+
+if __name__ == "__main__":
+    app.run()