Misaligned Web Player Toolbar Icons on Tablet in Chrome Browser

[thelastfantasy]

This issue respects the following points:

• [X] This is a bug, not a question or a configuration issue; Please visit our forum or chat rooms first to troubleshoot with volunteers, before creating a report. The links can be found here.
• [X] This issue is not already reported on GitHub (I've searched it).
• [X] I'm using an up to date version of Jellyfin Server stable, unstable or master; We generally do not support previous older versions. If possible, please update to the latest version before opening an issue.
• [X] I agree to follow Jellyfin's Code of Conduct.
• [X] This report addresses only a single issue; If you encounter multiple issues, kindly create separate reports for each one.

Description of the bug

Hello Jellyfin team,

I encountered a layout issue with the toolbar icons in the Jellyfin web player when using a tablet device with Chrome. The icons are misaligned or appear in unexpected positions compared to how they appear on a desktop browser. This issue impacts usability, as the toolbar elements become hard to reach and interact with on the tablet.

Reproduction steps

1. Open the Jellyfin web player in Chrome on a tablet (e.g., iPad or Android tablet).
2. Observe the layout of the toolbar icons at the bottom of the player.
3. Icons are misaligned or appear at unusual positions.

What is the current bug behavior?

Web Player icons is not right aligned. On my tablet (Chrome)

What is the expected correct behavior?

Volume and Config icons should be aligned on thr right side. Like this, on pc (Firefox)

Jellyfin Server version

10.10.0+

Specify commit id

No response

Specify unstable release number

No response

Specify version number

No response

Specify the build version

10.10.0

Environment

- OS:Truenas 24.10, Android 14, Windows 10
- Linux Kernel:
- Virtualization:Docker
- Clients:
- Browser:Firefox 131 (Windows 10), Chrome 130.0.6723.73 (Android)
- FFmpeg Version:
- Playback Method:
- Hardware Acceleration:QSV
- GPU Model:
- Plugins:
- Reverse Proxy:
- Base URL:
- Networking:
- Storage:

Jellyfin logs

Not need

FFmpeg logs

No response

Client / Browser logs

No response

Relevant screenshots or videos

No response

Additional information

No response

[GRFTSOL]

same problem at jellyfin-media-player and web player on windows, but jellyfin-media-player and web player on linux is aligned, I use firefox.

[viown]

Can you try clearing the cache?

[thelastfantasy]

Can you try clearing the cache?

I tried clearing the cache and restart chrome on tablet, but the issue persists. Also I tried open in Firefox on tablet, the web player looks OK but firefox cannot decode AV1 10-bit videos correctly, so it's not a solution foe me.

I reset all the Chrome data completely, and it's fixed now.

[thelastfantasy]

To improve cache management and prevent display issues after updates, I suggest adding a version hash (e.g., ?{jellyfin-version-hash}) to static asset URLs like CSS and JS files or just change the file name to playback-video-{jellyfin-version-hash}.css . This will ensure browsers load the latest resources after a version update, avoiding problems caused by outdated cached files. Thank you for considering this improvement!

[viown]

You're correct. The files should be using a hash but they currently aren't.

[GRFTSOL]

Can you try clearing the cache?

done by clearing the cache

[viown]

https://github.com/jellyfin/jellyfin-web/pull/6282