Improving code block readability

Conversation space is currently very limited, and doesn’t efficiently use the available screen space. While a maximum width nice for prose readability, it’s somewhat annoying for code blocks, which require unnecessary scrolling, even though enough space would be available for them.

My suggestion is to keep a fixed max-width for prose, just like it works currently, while allowing code blocks to expand into the available space. Here is some CSS that gives a preview of what it could look like:

/* Stay left aligned by default instead of centered, since user messages are on
   the right, just like basically all messengers do it. */
[data-testid^='conversation-turn-'] .mx-auto {
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
}
[data-testid^='conversation-turn-'] .agent-turn {
    max-width: 90%;
}

/* Move the prose width constraint to the actual children instead of the
   container, so code blocks can exceed it if necessary. */
[data-testid^='conversation-turn-'] .agent-turn .prose {
    /* Adjust to whichever width you want for regular prose, if any. Note that
       this has to be specified in rem, to ensure different text sizes don't
       compute different widths. */
    --preferred-prose-width: 48rem;
}
[data-testid^='conversation-turn-'] .agent-turn .prose > :not(pre) {
    max-width: var(--preferred-prose-width);
}

/* Ensure that code is shown at an appropriate width (i.e. at least 80 columns,
   which is the lowest common denominator for almost all code styles). */
[data-testid^='conversation-turn-'] .agent-turn .prose > pre {
    --preferred-code-width: max(2px + 2rem + 80ch, var(--preferred-prose-width));
    /* Ensures that min-width doesn't override max-width. */
    min-width: min(100%, var(--preferred-code-width));
    max-width: 100%;
    /* Anything in between these limits is decided by the actual code. */
    width: fit-content;
}

This would have to be translated to TailwindCSS to actually be used in the UI of course, but that’s pretty trivial to do. The CSS variables here are just used for clarity and aren’t strictly required.