Improve display of long user and course names in Messaging

Follow up from MDL-49848.

The Messaging Interface should be improved when or mobile, or in a small browser window. We need to make sure it's useable with:

• Extremely long course shortnames (the interface should look fine with the longest possible shortname)
• Extremely long full names of users

We also should move the contacts to be below the actual messages themselves, and fix the advanced search page (removing the tables, which are bad for accessibility)

See this comment (about the advanced search page) and this comment

In my site the .contactselector and .messagearea separator is overlapping .contactselector since 1280px. It depends on the selector options size, so a long course name breaks everything and with the current media query names longer than...20-30 chars would break it.
I think that we should limit the select options lenght and expand / reduce the 1000px media query according to it.
Also, to me, and this is a personal preference, I consider more important the conversation between 2 users than the list of users + courses selector, so when the media query is applied I would locate .messagearea on top of .contactsselector (if possible, without googling I don't know how to do it)

If there's anything that can be fixed in the stable branches, we will need to create another bug issue or backport request to cover it.