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

@@ -80,15 +80,33 @@ import Steam from "./Steam.vue";
     border-color: var(--quaternary);
 }
 
-.intro { grid-area: intro; }
+.intro {
-.listening { grid-area: listening; }
+    grid-area: intro;
-.stamps { grid-area: stamps; }
+}
-.feed { grid-area: feed; }
+.listening {
-.links { grid-area: links; }
+    grid-area: listening;
-.collage { grid-area: collage; }
+}
-.consumption { grid-area: consumption; }
+.stamps {
-.gym { grid-area: gym; }
+    grid-area: stamps;
-.favorites { grid-area: favorites; }
+}
+.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       intro"
-            "intro       intro"
+            "intro       intro       intro"
-            "listening   stamps"
+            "listening   stamps      stamps"
-            "listening   feed"
+            "listening   feed        feed"
-            "listening   feed"
+            "links   feed        feed"
-            "links       feed"
+            "links       feed        feed"
-            "links       feed"
+            "links       feed        feed"
-            "links       feed"
+            "favorites       feed        feed"
-            "favorites   consumption"
+            "favorites   consumption consumption"
-            "favorites   consumption"
+            "favorites   consumption consumption"
-            "favorites   consumption";
+            "favorites   consumption consumption";
     }
 
     .collage {

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"

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%;