Cleanup chat/userlist to use flexbox, fix a couple of bugs

[xPaw]

• Chat/sidebar are now positioned using flexbox and not absolute positioning
• Fix toggling userlist not keeping scroll to bottom correctly
• Fix up/down arrows in search bar changing caret position
• Fix error when trying to use arrows while search results are empty
• Changed scrolling code in userlist keybinds to use scrollIntoView(false)
• Changed .sidebar .users to .userlist to reduce confusion
• Userlist toggling is no longer animated, this is an intentional change
• Fixed On iOS, the user list does not seem to be scrollable #1548 - scrolling userlist on iOS devices

[astorije]

Possibly fixed scrolling userlist on iOS devices (#1548), needs testing

Yes! I confirm it's fixed with this PR, switching to "Bug" label.

[astorije]

Userlist toggling is no longer animated, this is an intentional change

Why? I'm not sure I'm in favor of that. Among other things, this means channel list is animated, but user list isn't (channel list animation when clicking the menu button is nice because it mimics the movement the channel list does when swiping it open).

[xPaw]

Why? I'm not sure I'm in favor of that

I really think the animation just gets in the way here, it doesn't add anything. It also looks somewhat disconnected as the chat itself is not animated (we discussed this before, we don't animate it due to reflowing and keeping the scroll position, and importantly performance).

As for the channel list, the current problem I have with it is that it's implemented in a different way (can't even hide it on desktop!).

I also want to look into making network and user list into "overlays" on mobile view, so that it doesn't push the chat around, and there I can look into animating it.

[xPaw]

Okay I went ahead and implemented userlist as an overlay on mobile.

1. On desktop, it pushes chat, there is no animation
2. On mobile, it's an overlay over chat, it's animated

Can you tell me if you prefer this implementation, and if the userlist scrolling still works on iOS.

[AlMcKinlay]

This looks pretty good, and works quite well.

I think I like the overlay, the chat moving was always a bit odd on mobile.

One thing I've noticed is that on mobile, if the number of users is low, and it doesn't overflow the screen, then the sidebar just stops at the end of the names. Other than that, seems good in my testing.

[xPaw]

@McInkay fixed.

[astorije]

Can you tell me if you prefer this implementation, and if the userlist scrolling still works on iOS.

Yes, this is a great compromise (I also agree that overlay on mobile was a must 👏) and I confirm it still works fine on iOS 🎉

Great stuff, and thanks for being open to alternatives :) I'ma review fully now

[astorije]

Pretty awesome stuff!

Code is actually rather hard to review because it solves many things and touches many places, but quick test showed it works well.
We have a lot of time before stable v3 to check any actual issues, so 👍

[AlMcKinlay]

Seems to work well. I also haven't looked through every single piece of code in this one, because that would be silly, really.