Fix Steam game transition jumping to top of container

Wrap Transition in a relative-positioned game-container div so the
leaving element's absolute positioning is scoped to the game area,
not the full wrapper. Use flex layout so the container fills only
the space below the header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vue/src/views/home/Steam.vue

@@ -17,91 +17,105 @@ let nextId = null;
 let refreshId = null;
 
 function nextGame() {
-  clearTimeout(nextId);
-  nextId = setTimeout(nextGame, 5000);
-  if (steamStatus.value.recentGames.length) {
-    idx.value = (idx.value + 1) % steamStatus.value.recentGames.length;
-  }
+    clearTimeout(nextId);
+    nextId = setTimeout(nextGame, 5000);
+    if (steamStatus.value.recentGames.length) {
+        idx.value = (idx.value + 1) % steamStatus.value.recentGames.length;
+    }
 }
 
 onMounted(() => {
-  nextId = setTimeout(nextGame, 5000);
-  refreshId = setInterval(() => steamStore.fetchSteam(), 5 * 60 * 1000);
+    nextId = setTimeout(nextGame, 5000);
+    refreshId = setInterval(() => steamStore.fetchSteam(), 5 * 60 * 1000);
 });
 onUnmounted(() => {
-  clearTimeout(nextId);
-  clearInterval(refreshId);
+    clearTimeout(nextId);
+    clearInterval(refreshId);
 });
 
 function formatHours(minutes) {
-  const hrs = (minutes / 60).toFixed(1);
-  return `${hrs}h`;
+    const hrs = (minutes / 60).toFixed(1);
+    return `${hrs}h`;
 }
 </script>
 
 <template>
-  <div class="steam-wrapper">
-    <Header class="text-left">
-      <span class="flex items-center gap-2">
-        Steam
-        <span
-          class="inline-block w-2 h-2 rounded-full"
-          :class="steamStatus.online ? 'bg-green-500' : 'bg-gray-400'"
-          :title="steamStatus.online ? 'Online' : 'Offline'"
-        />
-      </span>
-    </Header>
+    <div class="steam-wrapper">
+        <Header class="text-left">
+            <span class="flex items-center gap-2">
+                Steam
+                <span
+                    class="inline-block w-2 h-2 rounded-full"
+                    :class="steamStatus.online ? 'bg-green-500' : 'bg-gray-400'"
+                    :title="steamStatus.online ? 'Online' : 'Offline'"
+                />
+            </span>
+        </Header>
 
-    <div v-if="!loaded" class="p-2 text-sm">Loading...</div>
+        <div v-if="!loaded" class="p-2 text-sm">Loading...</div>
 
-    <Transition name="fade" v-else-if="game">
-      <div @click="nextGame" :key="game.appId" class="flex flex-col items-center">
-        <img
-          :src="game.headerImageUrl"
-          :alt="game.name"
-          class="game-img"
-        />
-        <p class="text-center">
-          <strong>{{ game.name }}</strong>
-        </p>
-        <p class="text-center text-tertiary text-xs">
-          {{ formatHours(game.playtime2Weeks) }} last 2 weeks
-        </p>
-      </div>
-    </Transition>
+        <div v-else-if="game" class="game-container">
+            <Transition name="fade">
+                <div
+                    @click="nextGame"
+                    :key="game.appId"
+                    class="flex flex-col items-center"
+                >
+                    <img
+                        :src="game.headerImageUrl"
+                        :alt="game.name"
+                        class="game-img"
+                    />
+                    <p class="text-center">
+                        <strong>{{ game.name }}</strong>
+                    </p>
+                    <p class="text-center text-tertiary text-xs">
+                        {{ formatHours(game.playtime2Weeks) }} last 2 weeks
+                    </p>
+                </div>
+            </Transition>
+        </div>
 
-    <div v-else class="p-2 text-sm">No recent games.</div>
-  </div>
+        <div v-else class="p-2 text-sm">No recent games.</div>
+    </div>
 </template>
 
 <style scoped>
 .steam-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    position: relative;
+    height: 50mm;
+    display: flex;
+    flex-direction: column;
+}
+
+.game-container {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: scroll;
 }
 
 .game-img {
-  width: 90%;
+    width: 90%;
 }
 
 p {
-  width: 100%;
-  margin: 0 auto;
+    width: 100%;
+    margin: 0 auto;
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease;
 }
 .fade-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
 }
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 </style>