Switch-Like Banners - DPI issues

[CryoManne]

In "Big Picture" mode in the "recent games" section, the highlighted item is off-screen when using a screen scaling other than Steam Deck scaling while using "Featured as Square" option. First items looks normally until scrolling happens:

PC auto and normal scaling:

Steam Deck-style scaling

I have poor knowledge of css, but I tried to figure it out and it seems that the problem is solved by using "recent games" item sizes as viewport values (vw and vh) instead of pixels (px), but this particular solution is not correct because in this case screen scaling option works everywhere except for items of the "Recent Games" section and that's wrong. Additionally, the native behavior of Steam is that when you change the screen scaling, the highlighted item does not move off the screen, but remains in the middle, regardless of the size of the items.

[MSeys]

I'm aware it doesn't really work for other scaling. I'm not really sure what the best way would be to fix this if it's even fixable. Sorry! It might be using item sizes in a certain way back-end that I cannot account for.

[CryoManne]

I'm aware it doesn't really work for other scaling. I'm not really sure what the best way would be to fix this if it's even fixable. Sorry! It might be using item sizes in a certain way back-end that I cannot account for.

There is another DPI issue. The Library items are not squared when using DPI scaling, but this can be fixed by using different item sizes. In this case, the scaling works right, but you have to change the values depending on the scaling settings. Maybe in this case it is worth using "math" calculated values?

[MSeys]

I'm really not sure. I personally don't use this theme myself and made it for others to work on Steam Deck and didn't really focus on making it work on other resolutions as it was already a pain to make it work for the Deck.

If you find a solution, I'd be happy to accept pull requests. There's definitely some back-end fuckery going on (by Steam) that's also stopping me from really investigating it further.

[CryoManne]

I'm not familiar with GitHub in terms of pulling requests, so take a look at this.

I used this code in 'same-size.css' to workaround dpi issues in "Recent Games" section: .gamepadhome_RecentSection_39tNv .ReactVirtualized__Grid__innerScrollContainer > div { width: 13.45vw!important; } and it looks like this:

But as you can see, there is big space between items and it changes depending on scaling settings.

I just noticed that this workaround works as intended only while using dpi scaling not lower than normal. But while using lower scaling it just changing the position of highlighted item and it's not off-screen. It's up to you if you accept this solution. I'm afraid that is kinda breaks the concept of this 😅

The Library section fixed simply by adding "width" parameter in the same place as "height" everywhere, like you've made for main screen in "Featured as Square" option. It's needless for Deck-scaling but for another scaling values.

[CryoManne]

I'm really not sure. I personally don't use this theme myself and made it for others to work on Steam Deck and didn't really focus on making it work on other resolutions as it was already a pain to make it work for the Deck.

If you find a solution, I'd be happy to accept pull requests. There's definitely some back-end fuckery going on (by Steam) that's also stopping me from really investigating it further.

@MSeys in same-size.css

.basicgamecarousel_FeaturedSeparator_1qOWM
{
    width:0px!important;
    visible: none!important;
}

.gamepadhome_RecentSection_39tNv .ReactVirtualized__Grid__innerScrollContainer [data-id="0"] {
    width: 0px!important;
}

that code fixes "running game" squared item space in steam overlay without fix: with fix: