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

@@ -54,8 +54,13 @@ function formatHours(minutes) {
 
         <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">
+        <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"
@@ -69,6 +74,7 @@ function formatHours(minutes) {
                     </p>
                 </div>
             </Transition>
+        </div>
 
         <div v-else class="p-2 text-sm">No recent games.</div>
     </div>
@@ -77,8 +83,16 @@ function formatHours(minutes) {
 <style scoped>
 .steam-wrapper {
     position: relative;
-  width: 100%;
-  height: 100%;
+    height: 50mm;
+    display: flex;
+    flex-direction: column;
+}
+
+.game-container {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: scroll;
 }
 
 .game-img {