Notifications panel scrolling doesn't work on high-resolution displays

[matteocontrini]

I have a report that the scrolling of the notifications panel is still broken, and it appears to be related to the fact that the screen has a 4K resolution. The problem appears on multiple browsers. I'm told that resizing the window to make it smaller fixes the issue.

Video follows.

2021-03-22.08-11-58.mp4

[davwheat]

I think it'd be a good idea to rewrite the drop-down/page to remove this issue once and for all.

My suggestion would be to load an amount of notifications based on the height of the viewport initially, or to limit the dropdown height with CSS.

[askvortsov1]

This particular issue seems to happen because notification list height is fixed at 70vh. Since the callback for checking whether we're at the bottom of the page and loading more happens on scroll, if the entire first page of content fits in those 70vh, there won't be a scrollbar, so there will never be scrolling, so nothing new will be loaded.

[davwheat]

@askvortsov1 We could force the inner container to be calc(70vh + 1px) as a workaround 🤔

[askvortsov1]

@askvortsov1 We could force the inner container to be calc(70vh + 1px) as a workaround

But then there'd always be a scrollbar, even when unnecessary.

[davwheat]

@askvortsov1 We could check the links of the notifications XHR response. If links.next exists, then there are more notifications, otherwise there aren't.

This could be used to force the inner container to be 70vh + 1px if more notifications are available.

[dsevillamartin]

We could check the links of the notifications XHR response. If links.next exists, then there are more notifications, otherwise there aren't.

This can be done once flarum/framework#2781 is merged, as it includes hasNext methods and stuff.