Here's what's going on. Equations are supposed to be centered without regard to the presence or absence of a tag, so the equation is put in a box with 100% width, and the tag is put in a zero-width box so that its contents extends to the left of the zero-width box. This makes the equation be centered in the 100%-width box regardless of the size of the tag. This also allows the equation to remain centered even if the width of the container element changes size (like in a page that has text that fills the window from left to right and you change the size of the browser window).
But this setup would allow the tag to overlap the equation if the equation were large enough and there wasn't room enough for both the equation and the tag. Ealier versions of MathJax did just that. This overlap was considered a bad thing, however, so now MathJax prevents the tag from overlapping the equation by setting the minimum width of the container to make sure there is enough room for the tag not to overlap the equation. For equations that are not centered (one of the options in MathJax), this means the minimum width needs to be the sum of the width of the equation plus that of the tag (plus a little bit of separation). But when the equations are centered, as is done here, it means that the width has to be twice the tag width plus that of the equation, because the tag starts overlapping a centered equation when the blank space on the left is the same width as the tag.
With very long tags, like in your case, that means that one must reserve a very large white space on the left to prevent the tag from overlapping the centered equation. The result is that the minimum width for the equation is wider than the text width used in the StackExchange layout, and so the equation extends to the right. Because the text width of the mobile layouts is even smaller, the equation extends considerably to the right. This is the cost of preventing the tags from overlapping centered equations.
While it would be nice if the centered equation could stop being centered at the time that the tag would start to overlap it, preventing the need for reserving the white space to the left, there doesn't seem to be a natural way to accomplish that in CSS that is available across all the browsers supported by MathJax. So this is the best compromise we could come up with. LaTeX itself doesn't have to deal with dynamically changing page widths, so doesn't run into this issue.
In any case, this is one reason not to misuse tags as annotations, and to use one of the other constructs that is designed for that purpose as suggested in the comments. These will also produce more semantically correct results, so that your mathematics will be able to be handled better by screen readers, for example. Getting something that is visually what you want but not semantically what you mean can cause problems for users who are not able to use visual representations and must rely on other technology to access the mathematics.