Fix layout shift issue

src/assets/css/index.css

@@ -7,6 +7,7 @@ body {
   @apply bg-background-main font-open-sans text-type-text;
   min-height: 100vh;
   min-height: 100dvh;
+  scrollbar-gutter: stable;
 }
 
 html[data-full],

src/backend/metadata/getmeta.ts

@@ -135,13 +135,15 @@ export async function getLegacyMetaFromId(
     throw err;
   }
 
-  let imdbId = data.external_ids.find((v) => v.provider === "imdb_latest")
-    ?.external_id;
+  let imdbId = data.external_ids.find(
+    (v) => v.provider === "imdb_latest",
+  )?.external_id;
   if (!imdbId)
     imdbId = data.external_ids.find((v) => v.provider === "imdb")?.external_id;
 
-  let tmdbId = data.external_ids.find((v) => v.provider === "tmdb_latest")
-    ?.external_id;
+  let tmdbId = data.external_ids.find(
+    (v) => v.provider === "tmdb_latest",
+  )?.external_id;
   if (!tmdbId)
     tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;
 

src/pages/PlayerView.tsx

@@ -1,5 +1,6 @@
 import { RunOutput } from "@movie-web/providers";
 import { useCallback, useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
 import {
   Navigate,
   useLocation,
@@ -92,6 +93,13 @@ export function RealPlayerView() {
 
   return (
     <PlayerPart backUrl={backUrl} onMetaChange={metaChange}>
+      <Helmet>
+        <style type="text/css">{`
+    html, body {
+      scrollbar-gutter: auto;
+    }
+  `}</style>
+      </Helmet>
       {status === playerStatus.IDLE ? (
         <MetaPart onGetMeta={setPlayerMeta} />
       ) : null}