Improve UI accessibility on small viewports

Setup for testing: Restore the course backup from the Moodle Features Demo course attached to this issue. Create a number of test users and enrol them to the course. Create a group in the course, add your test users and the admin user and enable messaging for the group. Open the inspector for chrome (or equivalent) and enable responsive mode. Change the screen size to 320px by 256px. Now navigate to various pages (see the “Test these pages" section below) and interact with them; on each page checks if there is a hidden horizontal scroll, elements are overlapping or if parts of the UI are cut off. Try testing with both themes Classic and Boost. Try some of the tests on a screen size of 1280 by 1024 and zoom using the browser zoom to zoom in by 200%.  Test these pages Use the messaging interface to find users, chat and change settings. Use the dashboard to go to a course, turn editing on and try if you can access the menus and move things around. Navigate to site administration and try to find various settings pages. Navigate to the Boost configuration page and try the colour chooser. Create a new Quiz with some simple questions. Create a new Forum and create a post.