fix(LogTable): implement virtual scrolling

[Antreesy]

Ref #1262

Attempt to implement 'virtual scrolling':

• copied from server/apps/settings/src/components/Users/VirtualList.vue, omitting some redundant logic for logreader

TODO:

• expanded LogTableRow is taking more vertical space, but doesn't seem to break scroller in general, and atm collapses after new scroll event

[ShGKme]

Implementing virtual scrolling is possible, but it is not something simple. A proper raw implementation would be about 300 - 500 more lines.

We do it in the files list in the Files app and then in the accounts table in settings.

Here the only problem is the table layout.

I'd try:

1. Check if we can use vue-virtual-scroller + display: contents to make div wrappers "invisible" for the tree in the table.
2. We can fork vue-virtual-scroller to add missing features like containers tag.
3. Use useVirtualList from vueuse. It might not work well with its default styles, but with constant height we can easily reuse it with translateY instead of marginTop.
4. Copy implementation from server

[Antreesy]

Copy implementation from server

Accounts table implementation looks more fitting, so I take over logic from it. Probably need some more style adjustments, but atm looks decent and works fine performance-wise.

cc @Pytal for input as author of original commit

[TDuffinNTU]

Absolutely ignore this comment if it's not helpful (I'm not a Vue dev, but I've worked on similar things in Flutter), but this and theadHeight may not be constant if I understand the implementation.

For example, some users may opt to increase the scale of their browser's content on high DPI displays or to aid readability. I can imagine scaling much beyond the assumed heights here would stop scrolling working as intended.

Of course, CSS and other elements may change outside of this file too in future commits.

[Antreesy]

Good point! Although actual amount of screen pixels taken might vary, from CSS perspective it's still the same parameters: font-size: 15px, button height: 34px. Current logic modifies and relies on CSS values, so should be fine.

Adding a resize check in case text wrapping may happen (hope it's not an overhead), but default should be aligned in the code anyway (starting ref(value) and style's min-height)