UI bug - Wierd displacement in content pagesdisplacement

[Hectik]

I recently ran into a bug after jumping upgrade of jellyfin web from idk how many versions ago to 10.10.3. I'm not sure if the update is related or if I messed up somewhere in terms of customizing.

I get this black box div in the middle of any content page. Images attatched. Any hints on how to fix would be appreciated.

[TheDreadPirate]

Can you share your current custom CSS or theme? Many many changes in jellyfin-web probably broke most or all of it. If you got your custom CSS from someone's git, check if they've updated their git with new CSS.

[Hectik]

I tried two themes, Jellytheme and Jellyflix, with Skin Manager and got the same result. I have no other CSS customization.

This is in branding.xml

Code:

<?xml version="1.0" encoding="utf-8"?>
<BrandingOptions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <CustomCss>@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/JellyTheme.css');
/* JellyTheme */@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Resize-Cards.css');
@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Resize-Cards.css');
:root {--accent:rgba(255,0,0,1)!important;}
</CustomCss>
  <SplashscreenEnabled>false</SplashscreenEnabled>
</BrandingOptions>

I have a few customizations in the index.html for title and seasonal "animation". I've also replaced a few assets through volume mappings.

I have tried downing, system prune -a and running the container again but I get the same results. Could something in the config folder be causing this? That is the only folder that is fully volume mapped

[TheDreadPirate]

Can you clear your browser cache? I want to ensure that there isn't some sort of cache issue.

@Ted Hinklater - do you have any insight?

[Hectik]

I think the issue is with the actual skins/css from the plugin. I've looked at more maintained git repos with Jellyfin skins and they seem to work well.

[Ted Hinklater]

Unfortunately I don't think ShiniGandhi's JellyTheme has been updated since jellyfin 10.8.x, the detailPage elements have definitely changed since then (10.9+ felt personal at times)

[Ted Hinklater]

If you add this snippet to the end of your CSS, it'll fix the main stuff

Code:

#itemDetailPage .detailLogo {margin-top: 3vh !important;}
#itemDetailPage .detailLogo {height: 20vh; margin-top: 10vh;}
.detailPageWrapperContainer {position: absolute; left: -35em; top: 22vh;}
.itemMiscInfo {left: 27vw; position: absolute;}
.layout-desktop .mainDetailButtons { margin-left: 45.5em !important; position: relative;}
.mainDetailButtons { margin-left: -1vh !important; margin-top: 6vh !important;}
.layout-desktop .trackSelections { margin-left: 17vw; max-width: 26vw !important;}
.detailPagePrimaryContent {min-height: 31vh !important;}

Before


After