Pin Listening header so only song content scrolls

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

vue/src/views/home/Listening.vue

@@ -30,13 +30,16 @@ onUnmounted(() => {
 
 <template>
   <div class="listening-wrapper">
+    <div class="header-wrapper">
+      <Header>Listening To</Header>
+    </div>
+    <div class="content-scroll">
       <Transition name="fade">
         <div
           @click="nextSong"
           :key="song.track.name"
-        class="flex flex-col items-center pt-2"
+          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'"
@@ -48,6 +51,7 @@ onUnmounted(() => {
         </div>
       </Transition>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -56,6 +60,21 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  padding-top: 0.5rem;
+}
+
+.content-scroll {
+  position: relative;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
 }