From e69942a7e8b3f519d1bc96c86b533f1800262796 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 30 Mar 2026 03:00:16 +0100
Subject: [PATCH] Cap image max-width in CommitHistory and Steam for responsive
 layout

Prevents avatar and game images from stretching too wide when sidebars
expand to 95vw at the 1360px breakpoint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/components/util/CommitHistory.vue | 10 +++++++++-
 vue/src/views/home/Steam.vue              |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/vue/src/components/util/CommitHistory.vue b/vue/src/components/util/CommitHistory.vue
index 598de46..f826b22 100644
--- a/vue/src/components/util/CommitHistory.vue
+++ b/vue/src/components/util/CommitHistory.vue
@@ -18,7 +18,7 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
 
         <div
             v-else-if="feed"
-            class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden"
+            class="flex-1 flex flex-col items-center overflow-y-auto overflow-x-hidden"
         >
             <h3>Last git activity</h3>
             <img :src="feed.avatarUrl" alt="User avatar" class="avatar" loading="lazy" />
@@ -35,3 +35,11 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
         </div>
     </div>
 </template>
+
+<style scoped>
+.avatar {
+    max-width: 200px;
+    width: 100%;
+    height: auto;
+}
+</style>
diff --git a/vue/src/views/home/Steam.vue b/vue/src/views/home/Steam.vue
index a93a687..818c348 100644
--- a/vue/src/views/home/Steam.vue
+++ b/vue/src/views/home/Steam.vue
@@ -99,6 +99,8 @@ function formatHours(minutes) {
 
 .game-img {
     width: 90%;
+    max-width: 300px;
+    height: auto;
 }
 
 p {