Rocket.Chat 5.2.0 added new icon, breaking layout when using darkmode with low resolution/scaling

[chotaire]

Describe the bug Rocket.Chat 5.2.0 added a new main icon to the top left corner of the app. On Windows 10/11 computers with HD resolution and small screens (e.g. 13" ultrabooks) where "Scaling" is automatically altered (or where Scaling has been manually altered under Windows Preferences -> Display) this will result in not enough space to display all icons.

To Reproduce Steps to reproduce the behavior:

1. Set screen resolution to 1920x1080
2. Go to Windows Preferences -> Display and change Scaling to 175% (quite common for small screens)
3. See the problem in the upper left corner of the Rocket.Chat web app.

Expected behavior There should be enough space to display all icons but thanks to Rocket.Chat adding a new icon, this is no longer the case.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro Version 10.0.22621.674
• Browser: Chrome Version 106.0.5249.119

[chotaire]

An idea would be to move the dark mode icon into the burger menu on the right.

[pbaity]

Yikes. I'll have to play around with the JS on this one - it should be possible to query the media screen size (with window.matchMedia("(max-width: 768px)"), or something like that I think) and decide whether to $(toggleButton).prependTo(sidebarToolbar) as we are now, or append it to the menu on the right.

I'm not a JS wizard like some of the contributors here are, so if someone else knows a better way, have at it!

[pbaity]

@chotaire I added my best attempt at this to a new branch here. I'm no front-end designer, so test it out and let me know what you think.

I don't have a lot of hardware to test on, but just by testing with dev tools and resizing the virtual device there, I think I found this issue starts to show up when width is around 1415px. My understanding is that pixels aren't always a great way to measure a screen, so to be safe I upped it to 1440: when the screen's width is less than this, the toggle button will be added to the channel nav bar instead.

I think.

[chotaire]

Hi, sorry for the late reply, I am a litlte busy lately. I currently only use Rocket.Chat dockerized, so there is no testing branches right now. I might find some spare time during my vacations to install the branch locally, but no promise. Maybe someone else can test?

[chotaire]

Rocket.Chat 6.0 comes with Dark Mode integrated, which is quite good by default, and it can be enabled/disabled using the drop down menu that appears when clicking your own avatar icon in the upper left. Additionally, when removing the home button in preferences, there is now more than enough space even for smallest displays with custom scaling. I would suggest this no longer needs fixed as the problem only exists in Rocket.Chat versions newer than 5.2.0 and older than 6.0.0 anyways, and only for very specific display configurations.

I would guess that at this point this issue can be closed but since you worked on something I will leave closing this issue up to you. I seem to have been a little confused earlier, since I could easily have tested your branch even on the dockerized version on Rocket.Chat, unfortunately by now I have updated all instances to 6.0.0. Apologies for the confusion, for whatever reason I thought it was a custom branch of Rocket.Chat itself.