Wrong offset for @mentions container for devices <= 400px

[BackpackersUnion]

When using @Username (i.e. Mentions) on a mobile device (or emulator), it appears a recent BP update (BP 2.9 -> 3.1) added some CSS/JS code that moved the mentions list off screen and out of view of the user.

To reproduce, use a mobile device or mobile emulator and try @mentioning a friend in the "What's New" text box or in a Comment. You should see the opaque background of the Mentions area (.atwho-view) but no friends or users listed.

The problem seems to be caused by CSS/JS that is effecting .atwho-view. Before the update the selector was getting the style "top: 107px;" applied, after the update the same style is "top: -5026px;".

WordPress 4.9.7
BuddyPress: Problem happening on 3.1.0 (did not occur with v2.9)
Theme: 2014

[r-a-y]

Confirmed when emulating iPhone 6/7/8 in Chrome, basically any width <= 400px.

I have a tentative fix that removes the height:100% CSS rule, which fixes things somewhat.

@BackpackersUnion - Can you test?

---

The following might also be a better fix for small-width screens:
​https://github.com/ichord/At.js/issues/321#issuecomment-319516017

[DJPaul]

Moving to 4.0.0 because we could do with more testing of this patch and deciding if updating at.js is more appropriate.

[boonebgorges]

I'm going to go with the smaller CSS fix for now. We should address updating at.js for the next release, as there may be compatibility breaks.

[boonebgorges]

See #8001.

[boonebgorges]

In 12289:

Fix positioning of @-mentions interface on mobile devices.

Props r-a-y.
Fixes #7928.