Prevent horizontal scroll in quotes / code blocks / `pre`

[ArturGajowy]

Hi!

Pasting a long line of text in a quote causes a vertical scrollbar to appear inside a message, which prevents the quote from being readable. E.g., paste the following docs excerpt into a quote block in a message:

Linkifiers make it easy to refer to issues or tickets in third party issue trackers, like GitHub, Salesforce, Zendesk, and others. For instance, you can add a filter that automatically turns #2468 into a link to  https://github.com/zulip/zulip/issues/2468.

If the pattern appears in a message topic, Zulip adds a little button to the right of the topic that links to the appropriate URL.

(funny how github UI suffers from exactly the same issue :smile:)

Currently, I'm adding the following user css to prevent vertical scrollbar in a pre block:

.messagebox-content pre {
    white-space: pre-wrap;
    word-break: break-word;
}

Could we have sth similar added by default? I can do a PR if you tell me where the message styles are in the source code :)

Thanks!

---

• Operating System:
  • [X] Windows
  • [X] Linux/Ubuntu
  • [X] macOS
• Clear steps to reproduce the issue:
• Relevant error messages and/or screenshots:

[kanishk98]

Hello @ArturGajowy! Thanks for filing the issue. I think this is related to our web app and not the desktop app, so I'll need to ask @timabbott to address your questions here.

[ArturGajowy]

oh, so you're saying I can contribute to to Zulip's look & feel by contributing there? :)

[kanishk98]

Yes, we'd love to see your contributions. The front-end code for the web app and the server-side Python stuff all lives in this repo.

[timabbott]

I'm not sure there is a simple solution to avoiding this kind of scrollbar, in that the alternative can mangle output in a way that is hard to read.

(Which is why GitHub works the same way Zulip does)

[ArturGajowy]

@timabbott even when word-break: break-word is included?

I'd say that it's a much better default. For the output to be mangled, it'd have to be hidden by the vertical scroll under the current css. I'd rather shift my eyes to the next line than need to click and scroll/drag.

Also, the only thing that gets mangled are strings not containing whitespace longer than the pre block itself, so urls mostly in me experience.

FWIW, discord doesn't suffer from the vertical scroll, and they seem to be using similar CSS. For sure they use white-space: pre-wrap;.

[wryonik]

@ArturGajowy @timabbott is this issue still available?

[andersk]

I’m not sure this is a change we want to make (see Tim’s comment above), but FWIW, the scrollbar in question is referred to as horizontal, not vertical.

[teatwig]

What about making this toggleable in the display settings? That way users who prefer wrapped lines (and thus possibly having output that might be harder to read) can opt in to activate it.

[timorantalaiho]

This would be an excellent feature.

It could be toggleable, with something like this

    ```(wrap)
    This loooooooooooooooooong line would be wrapped....................................................................................... somehow, with long words it's more difficult.
    ```

Or to include the syntax highlighting option

    ```java(wrap)
    if (!aContainer.isFocusTraversalPolicyProvider() && !aContainer.isFocusCycleRoot()) {
        throw new IllegalArgumentException("aContainer should be focus cycle root or focus traversal policy provider");
    ```

[amartin3225]

While it doesn't help if you're trying to use syntax highlighting for a specific language (e.g. as in the above example using java), you can do this right now when using the quote string after a block quote:

    ```quote
    This will be word-wrapped

[timorantalaiho]

While it doesn't help if you're trying to use syntax highlighting for a specific language (e.g. as in the above example using java), you can do this right now when using the quote string after a block quote:

    ```quote
    This will be word-wrapped

Ahh thanks! That helps a little, though for code samples and other "technical snippets" it has the additional drawback of losing the fixed-width font.

[alya]

I guess there are a couple of different proposals above:

1. Recipient side: Have a user setting for whether to wrap lines in code blocks.
2. Sender side: Add a special code block formatting option that is combines fixed-width font and language-based syntax highlighting with line wrapping.

I'm not sure about either of those being a feature we should implement, but would be great to clarify if both of those would equally address the problem being discussed here.

[crsongbird]

I have to add that I'd really appreciate this change, since I've instructed all my users (who all complain about this issue) to add the same string to their user css.

.messagebox-content pre {
    white-space: pre-wrap;
    word-break: break-word;
}

Line numbers would be really cool too. something like '''<language> wrap line-numbers on the sender side maybe? And by default it just doesn't wrap or show line numbers unless those strings are present.

Could literally add a toggle in user settings for this too. IMHO, I am a programmer, and having to horizontal scroll makes things harder to read. In my UIs, I tend to have it indent or add a visual glyph for wrapped lines and I was inspired to do this by Visual Studio. It works, it's readable, and it solves both sets of problems.