On this page using MathJax 3
https://pretextbook.org/examples/sample-article/crc/section-fundamental-theorem.html
the MathJax sub-menus overlap, depending on the body margin.
If the page is narrow, everything is fine.
But when the page is wide, so that the content is left-right centered
because of
body.pretext {
margin: 0 auto 0 auto;
}
then the sub-menus overlap.
Pictures available here
https://groups.google.com/g/pretext-dev/c/tEUuRiuN0Y8
I see this in Firefox, Chrome, and Safari.
In the inspector I see that the structure of the menus is
sibling divs:
div.CtxtMenu_ContextMenu.CtxtMenu_Menu
div.CtxtMenu_ContextMenu.CtxtMenu_Menu
and each of those has a left and top style inline. When the page
is narrow, the two lefts differ by a small amount, which is what causes
the overlap.
I could not figure out how to change that inline style, nor why the
body margin made a difference.
I am pretty sure it is the body margin because disabling the margin
CSS shown above eliminates the problem.
Thank you for any help,
David