add styles for compact layout

[uhoreg]

for #109, depends on matrix-org/matrix-react-sdk#986

I started with the styles from #109 (comment), and tweaked it and added a bunch more things, such as:

• tweak spacing for emotes so that the avatars don't collide
• shrunk spacing for URL previews
• shrunk bottom bar (left panel buttons, composer, right panel invite button)
• shrunk notification bar and unread messages bar
• shifted e2e icons and read receipts to be aligned with the new message positions

There may be other things that need tweaking, but I've been using this for most of the day without noticing anything weird.

[uhoreg]

Here, have a screenshot too:

[ara4n]

There's a bug in mini-avatar vertical offset on showing textualevents which aren't part of a continuation (i think?):

I'm failing to spot where that override has been missing

[ara4n]

ftr:

Matthew
uhoreg: my only concern here is at the maintainability of the overrides
how alarmed would you be if I suggested turning the magic numbers in the overrides at least into variables?
e.g. $compact-event-tile-padding-top rather than 18px or whatever
in the expectation that in future the non-compact-layout magic values would also be sensibly named
and appropriate arithmetic expressions used?
(which would then obviously let folks fine-tune more easily in future)

uhoreg
Yup, using variables sounds fine to me

[uhoreg]

@ara4n I think I've fixed the issue with the mini avatar positioning.

I'm not really a fan of the smaller username. IMHO it looks a bit off, especially when it's right next to an emote or info event that has the username in normal size

I'll take a look next into how best to make variables for the numbers.

[ara4n]

given this is working and the variables are subject to taste, i'm going to merge anyway. not sure what to do about subjective differences in taste about the layout though; i find the smaller username makes the content much more legible, as it makes it clearer that the name is less significant.

[4nd3r]

imho avatars should be bit smaller in compact mode, particularly when timestamps are always shown.