When editing tags, the bottom of the tag popup is invisible

Question

When editing the tags of a question, a pop-up appears listing up to 6 tags containing the current word and their excerpt. When the excerpts are long, the tag box is truncated, and I can't scroll down to the bottom.

Here's a screenshot from https://math.stackexchange.com/posts/1141180/edit in Chrome 40.0.2214.111. I observe the same effect (with the text truncated about one line further up) in Firefox 35.0.1. The main bug is that there is a second line of tags (listing pde, differential-topology and differential-forms), but scrolling doesn't reveal it; pressing Down four times (to move the focus to the 4th tag, i.e. the first tag on the second line) makes the popup fully visible as it should be. A secondary bug is that the “How to Tag” box at the bottom right overlaps the footer and is hard to read because it lacks a background.

I haven't been able to reproduce the main bug on other sites. For example, on Physics, when the tag popup doesn't fit, a scroll bar appears and scrolling down makes the tag popup come into view. This makes me suspect that this is a specific bug with Math.SE's design, although it could be a combination of MathJax and long tag wiki excerpts.

I observe the same bugs here on meta while posting this question — see how the bottom of the excerpt of the [tag:meta-tag:bug] tag is truncated below.

Answer 1

Looks like the same bug as previously reported on Workplace.SE in fact affects all SE sites. As I noted there, the problem is that the #content area of the page is styled with overflow: hidden, causing any elements (like the tag popup menu) that extend outside its boundaries to be cut off.

Anyway, the CSS to fix this is simple enough:

#content {
    overflow: visible;  /* this is actually the default */
}
#content:after {
    content: ' ';
    display: block;
    height: 0;
    clear: both;  /* expand content area to enclose any floats */
}

The first part just resets the overflow style for the content div to its default; the second part fixes the issue that the overflow: hidden style was originally added to address, namely that the #content area needs to expand to enclose any floated elements it contains (since the main post area and the sidebar are both actually floats).

I've added this CSS fix to the development branch of SOUP. Assuming it doesn't cause any unexpected breakage, it'll be part of SOUP v1.30, hopefully to be released in a few days.