Code blocks should not wrap automatically.

[ggbao666]

What problem are you trying to solve?

Code blocks should not wrap automatically; if they exceed the visible area, a horizontal scrollbar should be added.

What should Hubble do?

Code blocks should not wrap automatically; if they exceed the visible area, a horizontal scrollbar should be added.

Current workaround

No response

Examples, references, or screenshots

No response

How important is this to you?

1 — Nice to have

Blocked by

None - can start immediately

Context

No response

[github-actions]

Thanks for the report — this is clear and bounded, so I'm labeling it ready-to-implement.

The editor already tries to do this, but a broader rule wins:

• packages/ui/src/editor/EditorView.css:26 sets white-space: break-spaces and overflow-wrap: break-word on .ProseMirror, and code blocks inherit it.
• packages/ui/src/editor/EditorView.css (324-331) already sets overflow-x: auto on .ProseMirror pre, but the inherited wrapping means content never overflows, so the horizontal scrollbar never appears.
• Code blocks render through the pre > code node view in packages/ui/src/editor/CodeBlockExtension.tsx (187-192), so a single scoped CSS rule covers all of them.

Suggested fix: add white-space: pre and overflow-wrap: normal to the [data-hubble-editor] .ProseMirror pre rule so the existing overflow-x: auto takes effect.

One thing an implementer should preserve: source mode ([data-hubble-source-editor], see packages/ui/src/editor/EditorView.css:396) renders the entire raw-markdown document inside a single code block, where soft wrapping is the desired behavior. Keep wrapping there and scope the no-wrap change to the rich editor. Worth a quick check that the virtual cursor and selection toolbar still position correctly in a horizontally scrolled code block.

No existing issue tracks this; #6 added code block support and #238 covered scrollbar theming, neither of which addresses wrapping.

---

Triaged by a Warp Factory agent.