Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch-Like Banners - DPI issues #8

Open
CryoManne opened this issue Oct 22, 2023 · 5 comments
Open

Switch-Like Banners - DPI issues #8

CryoManne opened this issue Oct 22, 2023 · 5 comments

Comments

@CryoManne
Copy link

CryoManne commented Oct 22, 2023

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:
image

Steam Deck-style scaling
image

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
Copy link
Owner

MSeys commented Oct 22, 2023

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
Copy link
Author

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
Copy link
Owner

MSeys commented Oct 22, 2023

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
Copy link
Author

CryoManne commented Oct 22, 2023

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:
image

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 CryoManne changed the title Switch-Like Banners - Recent games focused element out of screen Switch-Like Banners - DPI issues Oct 23, 2023
@CryoManne
Copy link
Author

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:
image
with fix:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants