Improve scrolling behaviour

[ticky]

• This switches from using margin to using padding.
  • This means column backgrounds need to be painted inside the scrollable area rather than on the background of the column.
  • As a side-effect, it seems to provide a very minor boost to drawing performance, at the cost of a small amount of obviousness!
  • The padding also means the UI can scroll right to the end horizontally.
• This also fixes an issue where small browsers would encounter ~10px of horizontal scrolling.
• A few duplicate/overloaded CSS specifications were removed.
  • The ones that the browser used are the ones which stayed!
• The empty column indicator’s contents were set to flex to the centre so it can have a background applied, and could be squashed correctly by the column settings.
• Fixes Right-hand margin missing #1412

Screenshots:
320px wide:

340px wide:

Desktop:

P.S. The “clear notifications” button remains in the right spot on mobile screens (it required the addition of a breakpoint-aware CSS class)

To-do:

• Fix horizontal scrolling margin
• Make sure “clear column” button is still in the right place
  • On desktop
  • On mobile
• Check column settings opening behaviour isn’t adversely affected

[ticky]

Updated, having verified the behaviour in all environments I can find it affects. Now with screenshots and rationale! ✨