Horizontal overflow of long math expressions with the --math flag

[JCGoran]

Problem Description

This probably isn't as much of a bug, as it is my own lack of knowledge how to effectively use CSS, but I'm not sure where else to ask.
Anyway, the issue I'm having is that the default math generated by pdoc, if a bit lengthy, seems to overflow a bit on devices with narrow screen (notably mobile), i.e. it induces unnecessary horizontal scrolling.

Steps to reproduce the behavior:

1. make a file mymodule.py with the following contents:

def my_function():
    r"""
    This method has some long math:
    $$
        \Delta = \Delta_\text{galaxy} + \Delta_\text{RSD} + \Delta_\text{lensing} + \Delta_\text{Doppler} + \Delta_\text{potential}
    $$
    """
    return

2. run pdoc --math mymodule
3. notice the result has horizontal scrolling (i.e. the math overflows):
   

I think the fix should be something like:

.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: auto;
    overflow-y: hidden;
}

but I'm not entirely sure how to include it properly in the Jinja2 template (I've looked at #319 but I can't get it to work :(), so any help would be appreciated.

System Information

pdoc: 12.2.0
Python: 3.9.13
Platform: Linux-5.16.0-1-amd64-x86_64-with-glibc2.35

[mhils]

Thanks for the report! Fixed in #456.