Posters obstructing #-Z quick access

[broe7788]

I would like to fix this. I recently updated to the latest jellyfin build. The #-z list was on the right side before the update but for some reason after the update, it shifted to the other side and is now obstructed by the movie posters.

[dmitrylyzo]

Try disabling custom CSS first.

[thornbill]

Yeah those should be hidden on TVs due to the difficulty they cause when navigating with a remote.

[broe7788]

This is what I have. I don't believe any CSS is active

[dmitrylyzo]

Yeah those should be hidden on TVs due to the difficulty they cause when navigating with a remote.

AlphaPicker can be used on TV when the page has enough padding on the corresponding side.

I see no padding in the screenshot at all.

[broe7788]

The padding definitely went away with the update. IDK how to work around it but as you can see, those letters hug the edge pixels HARD lol. OR actually, now that I'm thinking about it, I think the padding mightve went nonexistent on the left side and doubled on the right? I'm not sure

[zhen-zen]

The issue is mainly introduced by https://github.com/jellyfin/jellyfin-web/pull/3676.

To compute the paddings, that PR uses max() CSS function, which is only available to Chrome 79+.

The fallback lines above the max() lines didn't work with M76 Chromium in model year 2021 Tizen 6.0 TVs. The computed result in devtools shows max() is being used, but the output is 0px. Meanwhile, M69 Chromium in model year 2020/Tizen 5.5 would discard the property and use the fallback line.

I'm not sure if there's a way to workaround this browser compatibility issue.

[UniverseDevel]

Yeah those should be hidden on TVs due to the difficulty they cause when navigating with a remote.

It seems alphaPicker in TV layout is disabled for Shows but not for Movies, Collections and Home Videos and Photos. Weird.

The fallback lines above the max() lines didn't work with M76 Chromium in model year 2021 Tizen 6.0 TVs. The computed result in devtools shows max() is being used, but the output is 0px. Meanwhile, M69 Chromium in model year 2020/Tizen 5.5 would discard the property and use the fallback line.

This seems to be indeed true and exactly my case as well.

Workaround

As a temporary solution you can use custom CSS below to fix padding (might be incomplete, but it fixed all relevant places for me). Let's hope this will get fixed in the future.

Server wide configuration of custom CSS can be defined here: Dashboard > General > Custom CSS code. This would define it for all users that does not have it specifically disabled and use TV layout only.

Put there this CSS and Save:

/* TV Layout: Remove alphaPicker and fix padding on item containers */
/*
.layout-tv .alphaPicker {display: none;}
.layout-tv div[is="emby-itemscontainer"] {padding-left : 3.3% !important; padding-right: 3.3% !important;}
*/

/* TV Layout: Keep alphaPicker and fix padding on item containers */
.layout-tv div[is="emby-itemscontainer"] {padding-left : 7.5% !important; padding-right: 3.3% !important;}

/* TV Layout: Fix padding on home screen */
.layout-tv .homeSectionsContainer {padding-left : 3.3% !important;}
.layout-tv .homeSectionsContainer div[is="emby-itemscontainer"] {padding-left : 0% !important;}

If some user does not need/like it, they can disable it for themselves here: User menu (or user avatar) > Settings > Display > Disable server-provided custom CSS code > Check. If you don't want to apply it server wide, but only for yourself, you can put it here: User menu (or user avatar) > Settings > Display > Custom CSS code.

You might need to force close the app and reopen it to see the effect right away or wait a little till some cache gets flushed.