Titles with MathJax break in the related questions

Question

Titles with MathJax break in the related questions.

It doesn't matter whether I'm logged in or not.

It happens on Google Chrome and on Firefox.

Screenshots from physics.SE and mathematics.SE:

Answer 1

Ok, so the problem was using flex indeed, but instead of replacing it with 'inline' we actually improved flex model a little bit. Why 'flex' instead of 'inline'? It is more flexible for what we need and it's easier to align elements. For example, single line questions are aligned vertically in the middle comparing to votes number on the left. This wouldn't be easily possible with 'display: inline'.

That being said, I consider this as status-completed. Again, thanks for reporting.

Answer 2

The issue appears to be that the page's CSS causes the links in the sidebar to be display: flex, and that changes how the children are treated. The content is no longer a paragraph-like structure that wraps normally. Instead, it is a series of boxes that align left to right. That means that the text before a math item is one box, the math is another, and the text that follows is a third. By default, these must appear all on one line, so the initial text is wrapped, as is the final text, and the math is smashed in between. Since these three boxes don't fit in the allowed horizontal space, the three boxes overlap, as in your diagram.

I'm not sure when the change to the CSS occurred, nor what the purpose of it is. It seems that it might simply be to allow the question title to be centered relative to the score on to its left.

I suspect that a fix would be to put the contents of the <a> element into a <span> so that there is only one child of the flex container (whose content will wrap normally).

UPDATE: While the addition of flex-flow: row wrap has improved the situation, it is still not fully correct. In particular, the spaces to the left and right of math are being lost (they are still in the text nodes, but are removed by the browser because those nodes are now children of a flex box). Here is an example:

while the correct rendering should be

(note the spaces around the mathematics).

In addition, the current CSS can also cause alignment issues. For example:

rather than the correct

because all the children are centered (rather than aligned on their baselines).

I do not think you will be able to fix these problems using CSS alone (as long as you require display: flex). Instead, as I suggested above, if you add a <span> inside the <a> so that the anchor has only one child, then you should get normal-paragraph flow within the <span>, while still being able to center the results as you desire. So the DOM would look like

<a ...>
  <span>
    ... current contents of link ...
  </span>
</a>