feat: horizontal scroll for long equations

[Jayitha]

Description

Currently, long equations rendered by MathJax tend to overflow the post content onto the right side navigational toc and on phones, they get completely cut off. PR introduces a horizontal scroll for along equations.

Fixes #543

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How has this been tested

I specified a long equation detailed below

$$
(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 equation currently runs over the navigation toc in the browser and gets completely cut off on the phone as described in the feature request: #543

Post making the changes in this PR, a disappearing horizontal scroll appears for long equation.

• I have run bash ./tools/deploy.sh --dry-run (at the root of the project) locally and passed
• I have tested this feature in the browser

Test Configuration

• Browser type & version: Safari (15.4) and Google Chrome (Version 99.0.4844.84 (Official Build) (x86_64))
• Operating system: macOS Monterey (12.3)
• Ruby version: ruby 2.6.8p205
• Bundler version: Bundler version 1.17.2
• Jekyll version: jekyll (4.2.2)

Checklist

• I have performed a self-review of my code
• I have commented on my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[cotes2020]

Thanks for the PR, but it might be better to change it as follows:

mjx-container {
  overflow: auto;
  padding: 0.5rem 0;
}

[Jayitha]

Hi, thank you for the comment.

1. I changed the commit message and
2. I made the changes you requested.

The suggested edits can create both horizontal and vertical scrolls for large equations. When using the Safari desktop browser, if the equation is wide a horizontal scroll appears and if the set of equations is lengthy a vertical appears (ofc if it's both, both scrolls are created).

Test Configuration:

To test this, I tried the following configurations using the Safari browser

[vertical scroll]: I used the following set of small-width equations

\begin{aligned}
(a + b)^3 &= (a + b)^2 (a + b)\\
&= (a^2 + b^2 + 2ab)(a + b)\\
&= a^3 + ab^2 + 2a^2b + a^2b + b^3 + 2ab^2\\
&= a^3 + 3ab(a + b) + b^3\\                                      
... //repeat these set of 4 equation 6-7 times inside the aligned environment.
\end{aligned}

O/P: only vertical scroll on desktop

[horizontal scroll] As specified in the PR description
O/P: Horizontal scroll and no vertical scroll on both desktop

[Both] Included all equations from the previous two tests in one aligned environment.
O/P: Both horizontal and vertical scrolls on desktop

Edit: Behaviour observed on the safari desktop browser only. When using Chrome or Firefox, no vertical scrolls are created.

[cotes2020]

Hi @Jayitha, I don't quite understand what your final conclusion is? Does this modification fix #543? Looking forward to your reply :)

[Jayitha]

Hi @cotes2020,

It absolutely does :) It fixes #543 by introducing horizontal scroll bars wherever necessary. But, on the Safari browser, it also does slightly more. Your suggested changes create vertical scrolls in some contexts as shown below.

double-scroll.mov

My comment above just details which scrollbars appear in which contexts just to document the behaviour. I've temporarily included a large equation here so you can check through the behaviour.

The old code snippet did not create vertical scrollbars.

Personally, I think vertical scrollbars are unnecessary for your beautiful theme. For instance, below as I vertically scroll through the long set of equations, I personally do not like the vertical scroll because of how messy it makes my post look when a part of the equation disappears.

vertical-scroll.mov

I observed this behaviour only when using the Safari browser but not on Chrome or the Firefox browser. I'm not sure why this is the case.

[cotes2020]

Sorry, I didn't notice you were using Safari for macOS. The vertical scrollbar doesn't show up in Chrome/Firefox, but it does on Safari desktop, I'm not sure why this happens.

As you said, vertical scrolling is unnecessary, the following changes can hide the vertical scrollbar on safari:

mjx-container {
- overflow: auto;
- padding: 0.5rem 0;
+ overflow-x: auto; 
+ overflow-y: hidden;
}

Of course, if you have a better way, welcome to correct me.

[Jayitha]

Hi @cotes2020,

No, it is completely my fault, I should have mentioned I was using Safari. I initially didn't think it would make a difference. I apologize for the confusion.

Should I update the commit as specified?

mjx-container {
- overflow: auto;
- padding: 0.5rem 0;
+ overflow-x: auto; 
+ overflow-y: hidden;
}

[cotes2020]

Should I update the commit as specified?

Yes, just change it to the following:

mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
}

It removes two unnecessary styles (display: inline-grid; and max-width: 100%;) in the solution mentioned in #543

[cotes2020]

Thank you for your time :)

[Jayitha]

Hi @cotes2020,

My last comment, I swear. This was my first PR. It felt really good :)
I know you could have easily done this yourself but you let me do it, I thank you for your time, patience and this wonderful theme!