3-column mode support for wider screens
After some experimentation and exploration I found a decent way on how to implement 3-column mode:
- Change our main layout to Grid
- Add another breaking point (approx >=1200px) where new layout is used
- Use portal/teleport to move notifications panel away from sidebar into main layout so it could be assigned a cell in the grid.
However, Vue2 doesn't have support for portals, and portal-vue doesn't support maintaining local state while Vue3 has native portals (called teleports) which move DOM node around and don't re-render the component. Unfortunately, not only portal-vue solution makes you lose your reply draft, it also causes a fuckton of statuses to re-rended, which causes rather serious lag, so this depends on #995 (closed)
See exploratory branch experimental-3-column
Another option could be just using grid layout always but it necessitates making scrolling per-panel, i.e. sidebar doesn't scroll but notifications panel does, same for main column. Neither of those conditions are satisfactory because:
- at smaller screens scrollable notifications panel would be incredibly tiny
- at bigger screens you won't be able to scroll main column with cursor being on blank area