Bug: login page and content are cut-off

[darkeclipse]

Describe the bug
The login page is unusable because it is cut off:

Also content renders in a broken state:

To Reproduce
Steps to reproduce the behavior:

1. deploy jellyfin. I'm using:

image:
      repository: jellyfin/jellyfin
      tag: 20240104.7-unstable
      pullPolicy: IfNotPresent

2. add css to jellyfin
   

3. modify nginx reverse proxy csp

add_header Content-Security-Policy "default-src https: data: blob: http://image.tmdb.org; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css https://fonts.googleapis.com/css2 https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons@latest/Font%20Awesome/light.min.css https://site-assets.fontawesome.com; script-src 'self' 'unsafe-inline' https://www.gstatic.com https://www.youtube.com blob:; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'; report-uri https://csp.example.org/report/csp/jellyfin; report-to csp-endpoint";

Expected behavior
The skin works, login renders properly, content renders properly.

Notes
Tested on both firefox and chromium on Arch.

content is cut-off only in firefox.

[Prayag Prajapati]

What jellyfin version are you on?

[darkeclipse]

I am on this version: 20240104.7-unstable from docker hub:
https://hub.docker.com/r/jellyfin/jellyfin

I am still deploying so I can still choose another image/tag if needed.

[darkeclipse]

I found a solution:

div#reactRoot {height: 100%;};

This fixes both issues for me

[Prayag Prajapati]

Unstable versions are not yet supported. Support for jf 10.9 will be added during RC release