Top Bar breakpoint may not account for scrollbar resulting in incorrect behavior

This issue is similar to the one I fixed in #2755.  Basically, the width calculations for breakpoints in javascript have to be checked against the actual media query rather than the document width due to browser differences in how media queries calculate the size (including or excluding scrollbars).

You can see the problem behavior if you reduce your Chrome browser size a pixel or two below the top bar breakpoint (which won't appear to switch into mobile mode), but if you click a dropdown, you'll end up with a large black bar appearing as if it was mobile.

I need some of the changes to land in #2755, and then I'll submit the pull request that fixes this.