The Carousel warps earlier than expected on Large Desktop at Jellyfin Media Player after v10.9

[ChowDPa02k]

Describe the bug

It seems that at large desktop, the width of library card was slightly larger than it's parent DOM, making it wrap earlier, casing a large vertical blank at homescreen.

To Reproduce

The Disable carousel css code comes from official document of jellyfin.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');
@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

body, h1, h2, h3, h4 {
  font-family: 'Quicksand', 'Noto Sans SC', sans-serif;
}
.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

/*Style backdrop*/
.backdropImage {filter: blur(18px) saturate(120%) contrast(120%) brightness(20%);}

/*Accent and roundingd*/
:root {--accent: 195,140,255;}
:root {--rounding: 12px;}

/* Disable carousel */
@media all and (min-width: 50em) {
  .homePage .emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons {
    display: none;
  }
  .homePage .itemsContainer {
    flex-wrap: wrap;
  }
}

Screenshots

Temporary way to fix

Slightly reduce the width of media card by the following CSS code:

@media (min-width: 100em) {
    .overflowBackdropCard, .overflowSmallBackdropCard {
        width: 18.5vw;
    }
}

Original was about 18.71vw