mjx-help icon cut off in when displayOverflow is set to "scroll"

[Cwooper]

Issue Summary

Loading MathJax with displayOverflow: "scroll" clips the mjx-help icon.

Note that the left and right borders of equations are cut off. The info icon also doesn't stay in the top right due to the absolute css positioning.

Steps to Reproduce:

Load MathJax with displayOverflow: "scroll". See CodePen page, screenshots, and MathJax configuration below.

Technical details:

• MathJax Version: 4.0.0
• Client OS: Windows 11 (26100.4061)
• Browser: Firefox (143.0b9), Chrome (139.0.7258.155), and Edge (139.0.3405.125)

I am using the following MathJax configuration:

<script>
 window.MathJax = {
   output: {
     displayOverflow: "scroll",
   },
 };
</script>

and loading MathJax via

<script
 type="text/javascript"
 src="https://cdn.jsdelivr.net/npm/mathjax@4/mml-chtml.js"
></script>

Supporting information:

CodePen

[dpvc]

Thanks for the report. I'll have to see what can be done.

[dpvc]

Try adding

mjx-container[display][overflow="scroll"] {
  margin: 0.7em 0;
  padding: 0.3em 2px;
}

mjx-container[overflow="scroll"] > mjx-help {
  position: sticky;
  inset: -100% 0 100% 0;
  margin-top: -0.3em;
  margin-left: -0.2em;
  margin-right: -0.4em;
}

to your page's CSS and see if that does more what you are looking for.