Scrollable box for long math equations on mobile

While writing new posts, I preview them on (Google) Chrome on my laptop before publishing. The three people who read my blog posts usually read them on mobile. So one fine day I decided to check what the posts look like on mobile, and I found something mildly annoying

The long math equation makes the page wider on mobile and adds whitespace to the rest of the page. This is not the case with code and output blocks, which are automatically put in scrollable containers if their width is larger than the screen width.

Which made me wonder — how can I do this for math equations as well? It definitely seemed possible from looking at Wikipedia. Thus began a three-day journey into the dark art of tweaking CSS files.

The most helpful thing I learned in this process is how to (pre)view posts — as they would show on mobile screens — on a laptop browser¹

¹ What’s cool is that it’s possible to see how it would render on different handsets.

Until quarto 1.4, there seems to be no parameter that can put a scrollable box around the math equations (for code it’s as simple as specifying code-overflow: scroll in the YAML post header, or more generally, the _metadata.yml file).

After some googling, I came across this solution

:::{style="overflow-x:auto;overflow-y:hidden;"}
$$
... long equation goes here ...
$$
:::

but I wanted something that would automatically apply to all posts.

The styles.css file in the root directory seemed to be the place to specify that MathJax should render long equations in scrollable containers. Based on this stackoverflow answer, I added the following code to the styles.css file (mjx-container is recommended for MathJax version 3, which is what Quarto seems to be using)

mjx-container {
  display: inline-flex;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

This fixed the equation overflow issue on Firefox² (version 123.0)

² which has ‘mobile mode’ as well in developer tools

but left ugly scroll bars in inline math in Chrome both on mobile (see the scroll bar under \(\beta_0\))

and on desktop³

³ (version 122.0.6261.94)

which looks horrible. Changing to display: inline-grid didn’t lead to any visible changes, and to display: block led to all inline math getting rendered in separate blocks.

After some more googling, I came across this suggestion

.MathJax {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

which fixed the unnecessary inline scroll bar issue (on Chrome)

and continued to have scroll bars for long display mode math equations (on Chrome)

However, this was not an ideal solution, as any long inline math equation on mobile would now overflow the page

whereas scroll-bar-on-inline-overflow would’ve been ideal, if it didn’t put unnecessary scroll bars elsewhere

Since I was a bit sick of this exercise, it was quite simple to track down the few long inline equations in some of the already published posts and change them from inline to display mode so they wouldn’t overflow the page⁴, and add a note to self to not use long inline equations for future posts.

⁴ which may still overflow on very small (mobile) screens

To recap, the ideal solution would’ve been one that puts scroll bars on long inline and display math equations if they overflow the screen (depending on the device type), but not put scroll bars where the text clearly fits on screen.