Fix smooth scrolling + add scroll on reply click

[gdbroman]

Demo

CleanShot.2023-04-04.at.21.11.32-converted.mp4

Explanation

react-virtualized (which I based our WindowedList component on) is fucked. It doesn’t support our use case with chat. I got smooth bottom-up scrolling working with CSS hackery, but not together with programmatic scroll to arbitrary row. The bottom line is that the react-virtualized algorithm is fundamentally a mismatch for the chat use-case, it was built for grids. The author even testified to this and that he won’t have time to fix it (issue still open).

Luckily there is another virtualization library built for chat, which out of the box supports:

1. Bottom-up scrolling
2. Variable-sized rows without manual re-measure
3. Programmatic scroll to arbitrary row
4. It is also actively maintained and has excellent docs

It’s called react-virtuoso and I’ve implemented it in this PR. Long term we might want to rebuild a new WindowedList based on it, but I can’t justify the time spend for it now.

All in all, scrolling UX is excellent now.

---

Side note: I've left the scrollbar visible on all lists. I thought it was helpful UI, but if you think it's ugly @drunkplato it's an easy removal.

[drunkplato]

I think leaving the scrollbar is fine as long as we can make the style of the scrollbar consistent across windows, mac, and linux.

• The track should be fully transparent.
• The scrollbar should be the Mac like pill as it currently appears.
• The scrollbar should darken slightly on hover.
• We should offset the scrollbar to appear a few pixels more to the right. Maybe translate the x position?
• Also noticed the footer needs more top padding (before it was fine)
  • 
  • 

/* width */
::-webkit-scrollbar {
  
}

/* Track */
::-webkit-scrollbar-track {
  
}

/* Handle */
::-webkit-scrollbar-thumb {
  
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  
}

[gdbroman]

We got a custom scrollbar now @drunkplato

CleanShot.2023-04-05.at.23.46.35.mp4