From 7798b5439148aa63eedaafc1582f163058b69aed Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 26 Mar 2026 02:10:21 +0000
Subject: [PATCH] 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 | 118 ++++++++++++++++++++---------------
 1 file changed, 66 insertions(+), 52 deletions(-)

diff --git a/vue/src/views/home/Steam.vue b/vue/src/views/home/Steam.vue
index 5f70ac7..6ceb12d 100644
--- a/vue/src/views/home/Steam.vue
+++ b/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>