From d268fea4becafe7e36c1eb5cc48566b1425575e5 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 30 Mar 2026 02:57:09 +0100
Subject: [PATCH] Fix Listening component preventing grid from shrinking and
 improve responsive layout

Remove fixed width/height attributes from album art image that set a minimum
intrinsic size, add fluid image styles, and improve mobile grid layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/views/home/Home.vue      | 64 ++++++++++++++++++++------------
 vue/src/views/home/Intro2.vue    |  2 +-
 vue/src/views/home/Listening.vue |  5 ++-
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/vue/src/views/home/Home.vue b/vue/src/views/home/Home.vue
index 611ad53..e842876 100644
--- a/vue/src/views/home/Home.vue
+++ b/vue/src/views/home/Home.vue
@@ -80,15 +80,33 @@ import Steam from "./Steam.vue";
     border-color: var(--quaternary);
 }
 
-.intro { grid-area: intro; }
-.listening { grid-area: listening; }
-.stamps { grid-area: stamps; }
-.feed { grid-area: feed; }
-.links { grid-area: links; }
-.collage { grid-area: collage; }
-.consumption { grid-area: consumption; }
-.gym { grid-area: gym; }
-.favorites { grid-area: favorites; }
+.intro {
+    grid-area: intro;
+}
+.listening {
+    grid-area: listening;
+}
+.stamps {
+    grid-area: stamps;
+}
+.feed {
+    grid-area: feed;
+}
+.links {
+    grid-area: links;
+}
+.collage {
+    grid-area: collage;
+}
+.consumption {
+    grid-area: consumption;
+}
+.gym {
+    grid-area: gym;
+}
+.favorites {
+    grid-area: favorites;
+}
 
 .sidebar-cell {
     background-color: var(--bg_primary);
@@ -156,15 +174,15 @@ import Steam from "./Steam.vue";
     .sidebar {
         width: 95vw;
         flex-direction: column;
+        align-items: center;
         justify-content: space-around;
     }
 
     .commits-sidebar,
     .steam-sidebar,
     .chat-sidebar {
-        min-width: 250px;
+        width: 100%;
         min-height: 250px;
-        max-width: 400px;
         max-height: 400px;
         height: 15vh;
     }
@@ -187,21 +205,21 @@ import Steam from "./Steam.vue";
     .homeGrid {
         border-image: none;
         border-width: 0;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: repeat(11, 1fr);
         height: 150vh;
         grid-template-areas:
-            "intro       intro"
-            "intro       intro"
-            "listening   stamps"
-            "listening   feed"
-            "listening   feed"
-            "links       feed"
-            "links       feed"
-            "links       feed"
-            "favorites   consumption"
-            "favorites   consumption"
-            "favorites   consumption";
+            "intro       intro       intro"
+            "intro       intro       intro"
+            "listening   stamps      stamps"
+            "listening   feed        feed"
+            "links   feed        feed"
+            "links       feed        feed"
+            "links       feed        feed"
+            "favorites       feed        feed"
+            "favorites   consumption consumption"
+            "favorites   consumption consumption"
+            "favorites   consumption consumption";
     }
 
     .collage {
diff --git a/vue/src/views/home/Intro2.vue b/vue/src/views/home/Intro2.vue
index 9636586..ede7694 100644
--- a/vue/src/views/home/Intro2.vue
+++ b/vue/src/views/home/Intro2.vue
@@ -114,7 +114,7 @@ onUnmounted(() => {
 <template>
     <div
         ref="container"
-        class="w-full h-full min-h-125 relative overflow-hidden"
+        class="w-full h-full relative overflow-hidden"
     >
         <div
             v-for="(item, i) in items"
diff --git a/vue/src/views/home/Listening.vue b/vue/src/views/home/Listening.vue
index 3f3b8fb..1c0dc22 100644
--- a/vue/src/views/home/Listening.vue
+++ b/vue/src/views/home/Listening.vue
@@ -37,7 +37,7 @@ onUnmounted(() => {
             class="flex flex-col items-center"
         >
             <Header>Listening To</Header>
-            <img :src="song.track.album.images[0].url" :alt="song.track.album.name + ' album art'" width="217" height="217" />
+            <img :src="song.track.album.images[0].url" :alt="song.track.album.name + ' album art'" />
             <p class="text-center">
                 <strong>Song:</strong> {{ song.track.name }}
             </p>
@@ -54,11 +54,14 @@ onUnmounted(() => {
     position: relative;
     width: 100%;
     height: 100%;
+    min-width: 0;
     overflow-y: auto;
 }
 
 img {
     width: 70%;
+    max-width: 100%;
+    height: auto;
 }
 p {
     width: 100%;