Wide LaTeX displays can get invisibly cut off

[gnprice]

Now that #2660 is complete 🎉 so that we have LaTeX support, we have the same issue in it as the webapp's zulip/zulip#14422: when a display formula is long/wide, the later portion of it can get cut off with no way to see it. The issue will show up more often when the display is narrow, like on a phone.

There's some previous discussion of this at #4005 (comment) , after @ray-kraesig discovered the issue while working on a draft branch for fixing #2660. I've pushed a rebased version of Ray's commit series for fixing the issue, here: master...gnprice:katex-scroll

See also discussion on the webapp issue. In particular Tim suggests:

I bet the issue is we should use the same horizontal scrollbar settings with too-wide math blocks that we do with too-wide code blocks.

[rk-for-zulip]

Note that solving this issue will probably depend, at least in part, on what strategy is used to solve it server-side. (In particular, we may want to patch old-style rendered HTML to match.)

[timabbott]

There's a good chance that a webapp-side solution would involve adding wrapping divs dynamically, rather than changing the basic format.

[timabbott]

I wonder if it makes sense to turn fixupKatex into a piece of shared code.

[gnprice]

I wonder if it makes sense to turn fixupKatex into a piece of shared code.

Sure, I think a solution like that would work well.

[timabbott]

@ray-kraesig if you want to put together a shared-code PR for the webapp doing that, the place to call this sort of post-processing step in the webapp code is _post_process_single_row, and the CSS would go into rendered_markdown.scss.

(We may want to make rendered_markdown.scss shared eventually, but having copies in both projects that are identical, to simplify later deduplication, is probably the best we can do for now)

[rk-for-zulip]

Well, it depends. The webapp may not want the same fixups as the mobile app, and almost certainly possibly doesn't want the same styling. (Further discussion over on the server-side bug.)

[gnprice]

The webapp may not want the same fixups as the mobile app, and almost certainly doesn't want the same styling. (Further discussion over on the server-side bug.)

From that discussion on zulip/zulip#14422 , it sounds to me like the mobile app and mobile web have the same needs here:

• they are especially likely to encounter this
• no scrollbar is shown when an element is scrollable

What styling differences do you have in mind?

[rk-for-zulip]

What styling differences do you have in mind?

Mostly it was the ones I didn't have in mind that matter here: I originally wrote that while failing to consider that the web app has a mobile view. 😓

There are some relevant subtleties. It's still the case that the webapp, unlike the mobile app, has to worry about a desktop configuration. Also, we have a different set of browser engines we have to support (the mobile app doesn't care about Firefox, for example, and I doubt the webapp cares about whatever stock Nougat (?) ships), and that may affect the options available to each app's CSS.

But for all that, there's a lot of overlap; we may well end up using the same solution. Amended appropriately.