Improve web app images scaling for 21:9 screen (or maybe res related?)

[Ewillian9]

Please describe your bug

Hi, not sure if it's related to 21:9 aspect ratio or if it's just a high res support issue but on my side, the web app display fine up to 2100p width. Above the images are just getting bigger and bigger without scaling down.

first image showing the scaling at 2099p (You can see the window width at the bottom right)

second image showing the scaling happening at 2100p (2101p, couldn't make it perfect)

but above the last re-scale happening at 2100p there none, so images are quite very big at 3440p

I noticed scaling happen at 700p, 800p, 1200p, 1400p, 1600p, 1920p and the last one at 2100p. As a solution we could simply add more like 2100, 2300, 2500, 2700, 2900, 3100, 3300, 3500,... Here I'm not sure since it seems to behave fine on high res 16:9 screen (3840x2160). But that could be a solution for 21:9 and 32:9 screen I'm available to provide more testing or info

Reproduction Steps

1. using any unstable until 20240422 or 10.8.13 build
2. just scale the window in width, past 2100p it wont re-scale down anymore

Jellyfin Version

Unstable (master branch)

if other:

No response

Environment

- OS: Windows 10
- Clients: Web/Browser
- Browser: LibreWolf, Firefox, Chrome, Brave,...
- FFmpeg Version: 5.1.4

Jellyfin logs

no logs seems relevant to me for this issue

FFmpeg logs

No response

Please attach any browser or client logs here

No response

Please attach any screenshots here

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[jellyfin-bot]

Hi, it seems like your issue report has the following item(s) that need to be addressed:

• The format of the environment section has been altered from the template.

This is an automated message, currently under testing. Please file an issue here if you encounter any problems.

[enter-a-random-username]

This is not a bug - it is intentional. CSS Flexbox has a few breakpoints to set a new % and be 100%. You could add more breakpoints or a max width and sometimes there is a little bit more margin around the box, but it will add new items per line.

Nice solution Use CSS grid via custom CSS. Basically you can set a min width for a Poster and it fits as many as possible and also stretches columns to fully fill the line. Jellyfin will not use it because for supporting old Chrome based TV platforms and CSS grid is only for 7 years inside chrome. Maybe you can convince somebody to do a progressive enhancement, so do grid and fallback to flex or use a polyfill.

I use something like this

  .vertical-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    grid-gap: 1.5rem;
  }

 .vertical-wrap > div {
    width: 100%;
  }

  .cardBox {
    margin: 0!important
  }

(I have a lot more patches in place, but this is main grid part)

[Ewillian9]

I understand better now thanks, not everything tho, I have low knowledge in css and web stuff (what you're talking abt). I quite don't understand what your css is supposed to do, (on my side) it's only removing the space between images and reducing the length of the top tabs (actually they re-scale down now instead of stretching).

(what are your patches patch?)

[enter-a-random-username]

You need something else for the slider. Didn't notice it was in the overview.

You can stick with flexbox for these or use grid. I defined a max-width so it is 12% width, but maximum 250px or so. This will cut the last image because it is not 100% divided by predefined amount of images for a breakpoint. I'm fine with half a image at the end or so and seeing more items.

1600px = 100em

@media (min-width: 100em) {
    .itemsContainer .overflowPortraitCard, .itemsContainer .overflowSquareCard {
        max-width: 200px;
    }
}

Some slider provide an with option so it calculate the width similar to grid.

[Ewillian9]

Wow thanks that's exactly what i needed. images aren't getting bigger and bigger and i can see more or them.

But it doesn't apply once inside the library folder. (my bad it does work there too)

I did set 150em tho, so it's doing the thing at 2400px.

[Ewillian9]

Just noticed, it doesn't apply on "mixed" library type

[enter-a-random-username]

Mix has different wrappers, you need to get the classes you want and add them

You can do also a mix, so if you want some increase in size in css wid5th per image:

    max-width: calc(100px + 5vw);

100px with + 5% of the window per image. So a huge screen with often higher density gets more images, but also slightly increases them in size.

[Ewillian9]

Well I consider this kinda resolved on my side as the custom CSS from @enter-a-random-username does a good job as a workaround. But an enhancement in the UI would be great to see without having to use custom CSS. Now i'm looking how. Should I open a draft PR and link this issue? Or open a new issue, but as an enhancement? Or is there another way.

[thornbill]

PRs are always welcome. 🙂 This issue is fine as is... I can just update the label.

[Ewillian9]

If someone knows which file is responsible for this I'm up for testing on various devices. But finding and and knowing what to change I'm afraid to be too much of a noob 😨