Avoid url takeover and loading glitch

packages/skin-database/app/(modern)/scroll/SkinPage.tsx

@@ -36,6 +36,7 @@ export default function SkinPage({ skin, index, sessionId }: Props) {
           alt={skin.fileName}
           style={{
             width: "100%",
+            aspectRatio: "275 / 348",
             imageRendering: "pixelated",
           }}
         />

packages/skin-database/app/(modern)/scroll/skin/[md5]/page.tsx

@@ -3,6 +3,9 @@ import UserContext from "../../../../../data/UserContext";
 import { getClientSkins, getSkinForSession } from "../../getClientSkins";
 import SkinScroller from "../../SkinScroller";
 
+// Ensure each page load gets a new session
+export const dynamic = "force-dynamic";
+
 export default async function Skin({ params }) {
   const { md5 } = await params;
 

packages/skin-database/legacy-client/src/redux/epics.js

@@ -462,7 +462,10 @@ const urlEpic = (actions, state) => {
 
       const newUrl = proposedUrl.toString();
 
-      window.history.replaceState({}, Selectors.getPageTitle(state), newUrl);
+      // Avoid clobbering URL for beta site
+      if (!window.location.href.includes("/scroll")) {
+        window.history.replaceState({}, Selectors.getPageTitle(state), newUrl);
+      }
     }),
     ignoreElements()
   );

packages/skin-database/legacy-client/src/redux/selectors.js

@@ -165,12 +165,6 @@ export const getRouteData = createSelector(
     getPermalinkUrlFromHash,
     skinData
   ) => {
-    const currentUrl = window.location.href;
-    // Hard code ignore "modern" paths for now.
-    if (currentUrl.includes("/scroll")) {
-      return { url: "/scroll/", title: "Scroll" };
-    }
-
     if (activeContentPage === REVIEW_PAGE) {
       return { url: "/review/", title: "Review" };
     }