Styling fixes for LG WebOS 5.x (Developed on LG CX OLED)

[matthijsvrenswoude]

I’ve been using JellySkin for a while, but yesterday I finally upgraded from the rather outdated Jellyfin 10.8 to version 10.9.x. Personally, I really like JellySkin’s style and think it should be the default for Jellyfin—but that's a different discussion.

When I opened Jellyfin on my LG CX OLED TV, I noticed the details page was a complete mess. After checking the GitHub issues section, I found that other users were experiencing similar problems. From what I gathered, the main developer doesn’t own an LG webOS TV, which explains the lack of optimization.

Since I’m a full time software developer with web development experience, I decided to debug and fix these issues for the benefit of all LG webOS 5.x users. Before diving into the improvements, I’d like to share some of the challenges I encountered while debugging.

Observations During Debugging

Different Browsers in the LG Ecosystem
On the LG CX, there are two ways to launch Jellyfin: either through the Jellyfin app or the webOS web browser. Interestingly, the browser versions differ significantly:

• The webOS browser runs on Chrome v79.
• The Jellyfin app uses an older version, Chrome 68.0.3440.106.

Finding Chrome v68 for Testing
I initially searched for a downloadable version of Chrome v68 to mirror the environment my TV uses. However, finding this specific version was a challenge, with most sources being rather sketchy. Eventually, I found Chrome 68.0.3439.0, which, although slightly older, seemed sufficient for testing.

During debugging, I discovered discrepancies between the behavior of the Chrome v68 build on my TV and my development environment. For instance I managed to fix the colliding header and description section bug in my dev environment but, certain issues visible in the Jellyfin app didn’t appear in my dev browser version. Suspecting the differences might stem from the exact Chrome build, I set up a VM and downloaded the same Chrome version Jellyfin uses. Yet, this didn’t produce consistent results either. My conclusion was that the WebAppManager, which runs on top of the Chrome browser in Jellyfin, might be introducing additional bugs.
Ultimately, I resorted to testing directly on my TV. This involved repeatedly opening and force-closing the Jellyfin app to preview changes—a tedious and frustrating process.

Fixes Implemented

After hours of experimentation, I successfully resolved all the issues I encountered with the details page. Below are the results, with before-and-after images for reference:

Before images:
Image 1
Image 2
Image 3

After images:
Image 1
Image 2
Image 3
Image 4

Issues Resolved:

• The header and content sections were colliding.
• Movie or episode images were misaligned and didn’t sit at the bottom as intended.
• PersonCards had an unintended oval shape.
• The focus border (provided by WebAppManager) overflowed outside the card.
• Margins were removed to ensure the movie description aligns with the video settings.

Solution

To fix these issues, apply the following CSS found in the attachment.
webOS5fixes.css.txt
`
body .detailPageWrapperContainer .detailPagePrimaryContainer{
display: block !important; /* Fixes bug where header and content section collide with each other /
}
#itemDetailPage #itemBackdrop{
display: none; / Fixes header gets large spacing on top */
}

body .card .cardContent, body .card.personCard .cardContent{
border-radius: 0 !important;
background-size: cover; /* removes oval shape on personcards and restyles them */
margin: 0 !important;
width: unset;
height: unset;
}

.cardImageContainer{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
display: flex !important;
justify-content: center;
align-items: center; /* sets up card image and centers the icon child if no image is supplied /
}
.cardImageContainer:before, .cardImageContainer:after{
content: none !important; / removes before and after elements and sets image on parent */
}

.detailImageContainer .card.portraitCard, .detailImageContainer .card.backdropCard{
all: unset !important; /* Fixes bug where portraitcard for movie and backdropCard for Tv episode which /
}
.card .cardScalable{
width: unset !important; / Fixes blue outline overflow on all cards when user focus is on an card */
}

.detailSectionContent p:first-of-type, .detailSectionContent p.overview{
margin-top: 0; /* removes additional padding in ddescription section /
}
.detailSectionContent .itemGenres{
display: none; / removes additional padding in ddescription section */
}`

Note I have not tested full compatibility yet on other devices then my LG TV so some testing is still required.

[ilbarone87]

Defo improved!!

Any chance you can have a look on the episodes listing?
At the moment it looks like this for me, seems every episode is in a giant box

Thank you very much for looking into it!!!

[prayag17]

Hey @matthijsvrenswoude ! Amazing work, I tried to rectify the webos issue using the emulator which did not work for me (maybe you can give it a go, you might have better luck than me) and webos simulator which showed no rendering errors.

I would be nice if you can create a pr linking all webos

[matthijsvrenswoude]

@ilbarone87, I noticed the same issue with the episode listing on my LG TV. After quite a bit of struggling, this was the best solution I could manage: https://postimg.cc/0r7z1sjn.

However, I was unable to replicate the image issue. I even added the penguin to my library, loaded the metadata, and it still looks like this. Could you provide more guidance on why the TV show logo is displaying correctly for you but not for me?

In the meantime (until the PR), you can use this CSS to fix the episode listing:

.layout-tv #itemDetailPage .childrenItemsContainer.itemsContainer-tv{ display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 2 em; } .layout-tv #itemDetailPage .childrenItemsContainer.itemsContainer-tv .listItem{ padding: 0.5em !important; } .layout-tv #itemDetailPage .childrenItemsContainer.itemsContainer-tv .listItem .listItemImage{ width: 100% !important; } .layout-tv #itemDetailPage .childrenItemsContainer.itemsContainer-tv .listItem h2{ font-size: 1.17em; } .layout-tv #itemDetailPage .childrenItemsContainer.itemsContainer-tv .listItem .listItemBody{ padding-top: 0; }

@prayag17, personally, I don't think it's worth using a simulator since I have the actual TV. Fixing the episode listing was incredibly challenging. Eventually, with some help from ChatGPT, I discovered a project called Eruda, which adds a JS-based console to mobile browsers.

While Eruda doesn't allow editing or show styling priorities, it was quite helpful for debugging class assignments in the TV environment. Interestingly, the TV environment seems to behave quite differently. Here's a screenshot for reference: https://postimg.cc/WDPps93Z.

I enabled Eruda by adding the following code to the index.html file in Jellyfin:
`<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

<script>if (navigator.userAgent.indexOf('Web0S; Linux/SmartTV') !== -1) { eruda.init(); }</script>`

[ilbarone87]

@matthijsvrenswoude should those CSS lines be added on top of the one you provided or they need to replace the CSS lines in the OP?
I've tried both method and they just break your fixes, going back to the original broken style.

RE: Logo, i've just added the suggested CSS line from the main readme of the theme (indeed removing that make the logo disappear). If you have added that and still cannot see them there's a troubleshooting section if you scroll a bit down. There's a bullet point that describe how to fix logo not showing up.

[matthijsvrenswoude]

@ilbarone87 Its should append to the bottom.
Here you have it as a whole, so you can replace all the existing modification styling entirely
webOS5fixesV2.css.txt

Got it, the logo is a part of a third party extension.