Directory channel listing has incorrect behaviour in high Y resolutions

[Jannibal]

Description:

Directory does not list all channels when placing Rocket.Chat on a monitor in portrait mode (resolution based).

Server Setup Information:

• Version of Rocket.Chat Server: 0.62.1
• Operating System: Ubuntu 16.04.3 LTS
• Deployment Method(snap/docker/tar/etc): Snap
• Number of Running Instances: 1
• DB Replicaset Oplog: Enabled
• Node Version: v8.8.1
• mongoDB Version: ?

Steps to Reproduce:

1. Place Chrome tab in fullscreen on a monitor in portrait mode (with height more than ~1200 pixels)
2. Click directory button

Expected behavior:

All the channels available should be listed

Actual behavior:

Few channels are listed, and cannot scroll further. Sorting by name "works" since the end of the channel list appears at the top, but scrolling is still not possible.

Additional information

Different resolutions changes the behaviour:
1920x1200 (landscape) Works
1200x1920 (portrait) Doesn't work

Resolutions tested on the same monitor with same orientation:
2560x1440 (landscape) Doesn't work
1920x1080 (landscape) Works

So it would seem that the resolution is the culprit in this case,.

[lunaticmonk]

@Jannibal Can you provide screenshots or gif? It would be really be helpful to visualize things. Thanks.

[Jannibal]

You can see the same directory view on two different monitors below.
In the landscape one, it works as intended, with a scroll bar on the right side which allows the user to scroll down and see all the channels

In the portrait version (with the same resolution, but other orientation) the scroll bar is not present, and the channels look like they "end". There are more channels, but they are not rendered, and there's no scroll bar.

This problem is present on other monitors that have different resolutions, but in the same orientation. Eg. if I have a monitor with 2560x1440 resolution (still landscape), this problem persists.

Also checked this problem with the Rocket.Chat+ client for Windows, and it's there too. So Chrome Win+Linux and Rocket.Chat+ client for Windows has this problem.

Sorry for the heavily censored screen shots.

[theorenck]

Thanks @Jannibal. @karlprieb can you confirm it as a duplicate?

[mddvul22]

This is happening for me on the Rocket Chat demo server, using either firefox or Chrome in landscape mode. The below screenshot is from Firefox 52 ESR. There is no scroll bar. It only shows 10 channels.

[Eiken]

Same here. It seems to be related to running a monitor with such high resolution that the scrollbar is never initialized. If I zoom in to make the scrollbar appear it starts to work.

[Gummikavalier]

We were still experiencing this in 0.64.2 with Firefox.

Custom CSS workaround:

section.rc-directory {
	height: 99% ;
}