From f6bc5264d571060c55cb5f4b3cd5ddc47bdb2ae7 Mon Sep 17 00:00:00 2001 From: Georges-Antoine Assi Date: Thu, 25 Jun 2026 17:16:00 -0400 Subject: [PATCH] fix(frontend): contain hover-video to miximage frame + restore dev HMR The miximage hover video had no height bound, so a tall/narrow source overflowed the cover. Match the miximage frame's box and `object-fit: cover` it so the clip fills the bezel screen and crops instead of spilling past it. Also gate the PWA dev service worker behind DEV_PWA: it intercepted dev requests and forced full page reloads on every edit (CSS included), defeating HMR. Default dev now gets working HMR; set DEV_PWA=true to test the PWA in dev. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/v2/components/shared/GameCover.vue | 5 +++-- frontend/vite.config.js | 6 +++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/v2/components/shared/GameCover.vue b/frontend/src/v2/components/shared/GameCover.vue index fc13c41ff..12b75330d 100644 --- a/frontend/src/v2/components/shared/GameCover.vue +++ b/frontend/src/v2/components/shared/GameCover.vue @@ -358,9 +358,10 @@ defineExpose({ .game-cover__video { position: absolute; top: 0.75rem; - left: 0.35rem; + left: 0.3rem; width: 97%; - object-fit: contain; + aspect-ratio: 745 / 550; + object-fit: cover; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; diff --git a/frontend/vite.config.js b/frontend/vite.config.js index ff251e06b..a53643984 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -67,6 +67,10 @@ export default defineConfig(({ mode }) => { const backendPort = env.DEV_PORT ?? "5000"; // const devMode = env.DEV_MODE === "true"; const httpsMode = env.DEV_HTTPS === "true"; + // The PWA service worker intercepts dev requests and forces full page + // reloads on edits (CSS included), defeating HMR. Keep it off in dev unless + // explicitly testing the PWA (DEV_PWA=true). + const pwaDevEnabled = env.DEV_PWA === "true"; return { optimizeDeps: { @@ -96,7 +100,7 @@ export default defineConfig(({ mode }) => { ], }, devOptions: { - enabled: true, + enabled: pwaDevEnabled, type: "module", }, }),