UI bug - Wierd displacement in content pagesdisplacement

UI bug - Wierd displacement in content pagesdisplacement - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Troubleshooting (https://forum.jellyfin.org/f-troubleshooting)
+--- Thread: UI bug - Wierd displacement in content pagesdisplacement (/t-ui-bug-wierd-displacement-in-content-pagesdisplacement)

UI bug - Wierd displacement in content pagesdisplacement - Hectik - 2024-11-22

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.

RE: UI bug - Wierd displacement in content pagesdisplacement - TheDreadPirate - 2024-11-22

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.

RE: UI bug - Wierd displacement in content pagesdisplacement - Hectik - 2024-11-22

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

RE: UI bug - Wierd displacement in content pagesdisplacement - TheDreadPirate - 2024-11-22

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?

RE: UI bug - Wierd displacement in content pagesdisplacement - Hectik - 2024-11-22

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.

RE: UI bug - Wierd displacement in content pagesdisplacement - Ted Hinklater - 2024-11-22

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)

RE: UI bug - Wierd displacement in content pagesdisplacement - Ted Hinklater - 2024-11-22

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