V4 GUI default scale too large

[mkanet]

Guys, thank you so much for all the recent improvements to the Ombi interface. Anyway, I wanted to point out that Ombi's interface default scale appears to be unusually large in respect to other similar interfaces on a typical 1920x1080 desktop (at least on my Windows 10 PC). Currently, it can barely fit 6 posters in my web browser (if I also want to see the sidebar) ..and, have my web browser on the left side of my desktop.

100% scale:

The only way I can fix this scaling issue is by adding the below custom CSS code:

html {zoom: 84%;}

84% scale:

Is this extra-large default scale done intentionally? Maybe Ombi detects desktop resolution incorrectly.. thinking my desktop is 4K resolution?

NOTE: Forgive the added "dark" color css mod included in the screenshots above. Even without any color mod at all, the scaling looks exactly the same, only colors are different.

Desktop (please complete the following information):

• OS: Windows 10

Ombi Version (please complete the following information):

• Version: 4.0.1420
  • Media Server: Plex
  • Database Type: SQLite

[ombi-bot]

Hi!
Thanks for the issue report. Before a real human comes by, please make sure you used our bug report format.
Have you looked at the wiki yet? https://docs.ombi.app/
Before posting make sure you also read our FAQ.
Make the title describe your issue. Having 'not working' or 'I get this bug' for 100 issues, isn't really helpful.
If we need more information or there is some progress we tag the issue or update the tag and keep you updated.
Thanks!
Ombi Bot.

[twanariens]

It should look like this:

For a 1920x1080 display. Do you have a scale/zoom activated on your display? (Windows/Mac settings)

[mkanet]

Scaling is completely disabled on my Windows 10 desktop. It's just vanilla 1920x1080p@60Hz.

Below is what it looks like when sitting on the left side of my desktop at 100% scale. It looks the same regardless of what web browser I use. The odd thing is that I can't reproduce this issue with any other web interface (radarr, sonarr, plex, petio, etc) displayed on the same desktop.

Is there a chance the method used to detect desktop size may not be calculating size correctly?

[twanariens]

I am talking about this:

And I am not sure whether Radarr/Sonarr use a different from of detecting Windows sizes. We use @media calls to change styling based on pixels. But it seems like the browser is reporting back "wrong" pixels.

Can you double check the Windows option I have posted above

[mkanet]

I am talking about this:

And I am not sure whether Radarr/Sonarr use a different from of detecting Windows sizes. We use @media calls to change styling based on pixels. But it seems like the browser is reporting back "wrong" pixels.

Can you double check the Windows option I have posted above

PS: This happens with all my browser extensions disabled. Just plain old Chrome. Same thing with MS Edge.

[twanariens]

What is your chrome zooming set to:

[mkanet]

What is your chrome zooming set to:

100%. I have to change it to 75% for it to fit more posters.

[twanariens]

I am trying to wrap my head around this, cause it doesn't make sense. Something is scaling it and it is not Ombi (as you can see per my screenshot). But it still only happens for Ombi (cause you said Sonarr and Radarr are working fine).

Can you check the width of the image posters for me?

P.s. your chrome screenshot does show a positive scaling (magnifying glass with a + in it). So it doesn't correlate with what you suggest setting it to 75% (meaning chrome would show a magnifying glass with a - in it) Mind sending a new screenshot?

[mkanet]

@twanariens, I just viewed Ombi webpage on a completely different Windows 10 PC (my work laptop connected to a 1920x1080 monitor). The same exact issue happens. I even bypassed my reverse proxy; connecting directly to Ombi service itself on my LAN.

The poster size is: 190x285 (when displayed in the web browser):

Below, is a screenshot from a chrome web browser on my work PC (no scaling in the OS or web browser). The web browser is on the left half of my desktop. I didn't resize the screenshot below in case you want to Save image as... to download it:

PS: If the sidebar is visible, instead of seeing 8 posters, I only see only 6 posters (just like the OP screenshot of this thread)

[twanariens]

Thank you for the extensive testing mate! That does help out with a lot of questions I had.

Can you create a test account for me and provide the details + url of ombi in a DM to me? Would like to take a look.

[mkanet]

@twanariens. I have set you up with a test account on my server.

I coudlnt find you on the Ombi Discord channel. I hope it's okay, I just sent you a private message on Reddit with access information.

Thanks so much for your help!

[twanariens]

@mkanet I am the "iCare.Kuraki" guy on Discord.

[twanariens]

This is how your Ombi looks for me:

[mkanet]

@twanariens, yes, that's what it looks like for me too when I display the interface fullscreen. I almost never display my web browser fullscreen on a 1920x1080 (16x9) desktop. The scaling issue I'm talking about is when displaying the web browser on either the left-half or right-half of the desktop; just like all my screenshots above. Windows 10 lets you put apps on the left or right side of the desktop with a win+leftarrow key combination or win+rightarrow

You should most likely get a screenshot similar to what I posted in my screenshots. Once you do, try the same thing with Radarr or any other similar interface...

EDIT: My first post will probably make much more sense now :)

[twanariens]

Okaaaay. Now it all makes sense. But this is more "personal preference" or a feature request than an "issue".

If you want to "customize" it to your needs you can use the custom css block with the following code:

@media (min-width: 755px){ .p-carousel-items-container .p-carousel-item { flex: 1 0 160px!important; } }

Now if you want go smaller than 160px, you will also need to change the font size of the overlay:

@media (min-width: 755px){ .p-carousel-items-container .p-carousel-item { flex: 1 0 130px!important; } .top-left{ font-size:11px !important; } .top-right span.indicator-text{ font-size:11px !important; } }

You can decide how it looks :D

[mkanet]

Thank you for looking into this. I tried the CSS code you suggested. It seems to be specific to just poster size.. which makes the posters look pretty strange. The issue I mentioned is general scale for the entire Ombi interface (all fonts, images, etc ) in comparison to commonly used interfaces like Radarr, Sonarr, *arr, Plex, Emby, Jellyfin, etc... pretty much ALL similar apps that display TV/Movie media posters.

Normally, we can fit 3 rows of posters in a web browser interface on a typical 1080p display; which is more efficient use of the display area. With Ombi, it's 2.5 rows with unusable posters cut off at the bottom.

Radarr:

Plex:

Ombi:

I was able to use the CSS code below to cure this. However, I just wanted you to be aware that Ombi is only app that seems to display 2.5 rows of posters with unusually large fonts.

html {zoom: 84%;}

Anyway, no worries mate. I just want to be sure you're aware that Ombi is the only app that seems to have this unusual scaling preference. :)

[twanariens]

You do have a point though, but that would mean the entire design/layout needs to be converted to em instead of px. Which is doable, but that would probably need a full rewrite of the design. I will keep it in my mind whenever we are going to redesign new parts to fix this but for now, it is what it is unfortunately

[mkanet]

Thank you for considering this suggestion. You guys are great. Would you like for me to close this issue?

[twanariens]

Yes please :D