From 63c155ceafd0384c4adfe35831b85276e63d23e0 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 16 Dec 2022 22:30:25 +0700
Subject: [PATCH] fix: scroll fade problem on Artist/Album screen (#1634)

---
 .../js/components/screens/AlbumScreen.vue     | 16 ++------------
 .../js/components/screens/ArtistScreen.vue    | 14 +------------
 .../components/ui/ArtistAlbumScreenTabs.vue   | 21 +++++++++++++++++++
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index dc37abb7..7c4908c4 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -52,7 +52,7 @@
         </label>
       </template>
 
-      <div v-show="activeTab === 'Songs'">
+      <div v-show="activeTab === 'Songs'" class="songs-pane">
         <SongListSkeleton v-if="loading" />
         <SongList
           v-else
@@ -65,7 +65,7 @@
 
       <div v-show="activeTab === 'OtherAlbums'" class="albums-pane" data-testid="albums-pane">
         <template v-if="otherAlbums">
-          <ul v-if="otherAlbums.length" class="as-list">
+          <ul v-if="otherAlbums.length" class="as-list" v-koel-overflow-fade>
             <li v-for="a in otherAlbums" :key="a.id">
               <AlbumCard :album="a" layout="compact" />
             </li>
@@ -186,16 +186,4 @@ eventBus.on('SONGS_UPDATED', () => albumStore.byId(albumId.value!) || go('albums
 #albumWrapper {
   @include artist-album-info-wrapper();
 }
-
-.albums-pane {
-  padding: 1.8rem;
-
-  > ul {
-    @include artist-album-wrapper();
-  }
-}
-
-.info-pane {
-  padding: 1.8rem;
-}
 </style>
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 71c44164..d1185e48 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -63,7 +63,7 @@
       </div>
 
       <div v-show="activeTab === 'Albums'" class="albums-pane">
-        <ul v-if="albums" class="as-list">
+        <ul v-if="albums" class="as-list" v-koel-overflow-fade>
           <li v-for="album in albums" :key="album.id">
             <AlbumCard :album="album" layout="compact" />
           </li>
@@ -175,16 +175,4 @@ eventBus.on('SONGS_UPDATED', () => artistStore.byId(artist.value!.id) || go('art
 #artistWrapper {
   @include artist-album-info-wrapper();
 }
-
-.albums-pane {
-  padding: 1.8rem;
-
-  > ul {
-    @include artist-album-wrapper();
-  }
-}
-
-.info-pane {
-  padding: 1.8rem;
-}
 </style>
diff --git a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
index 8ac1629f..464580ce 100644
--- a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
@@ -54,7 +54,28 @@
 }
 
 :deep(main) {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
   flex: 1;
+}
+
+:deep(.songs-pane), :deep(.albums-pane) {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
 }
+
+:deep(.albums-pane) {
+  > ul {
+    @include artist-album-wrapper();
+
+    padding: 1.8rem;
+    overflow: auto;
+  }
+}
+
+:deep(.info-pane) {
+  padding: 1.8rem;
+}
 </style>