Horizontal Scrolling for Long Equations

[Jayitha]

Checklist

• I have read the contributing guidelines.
• There is no similar request on existing issues (including closed ones).
• I have read the project progress and know the current progress of the project.
• I was in the master branch of the latest code.

Is your feature request related to a problem? Please describe

Currently, long equations rendered by MathJax tend to overflow the post content onto the right side navigational toc. For instance, when I included the following equation

$$
(a + b)^3 = {3 \choose 0} a^3 b^0 + {3 \choose 1} a^2 b^1 + {3 \choose 2} a^1 b^2 + {3 \choose 0} a^0 b^3 + 0 \left ({3 \choose 0} a^3 b^0 + {3 \choose 1} a^2 b^1 + {3 \choose 2} a^1 b^2 + {3 \choose 0} a^0 b^3 \right )
$$

This problem is very stark when viewing on a mobile, even relatively small equations tend to get cut off and the rest of the equation is not viewable.

Describe the solution you'd like

Ideally, I would like to have the ability to scroll through the equation horizontally when it exceeds the width of the post. Similar to how code blocks behave.

Describe alternatives you've considered

I've currently hacked together a solution to enable horizontal scrolling for equations by including the following piece of code¹ in the _sass/addon/commons.scss file

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

This is the way my hacky solution seems to work (also demo here)

scroll.mov

I haven't tested it extensively, but this seems to work well both on the desktop and on the mobile while retaining your beautiful scroll feature (i.e. scroll is hidden when the mouse pointer is not in the block).

Additional context

I would have made a pull request but I wasn't sure if this was the best solution or if there was a better place to put this piece of code. My web dev skills are equivalent to those of infants.

Footnotes

1. StackOverflow Answer ↩