From 77d0c0122565260ef3771a4d03a1dcb0aae654dc Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 15:21:18 +0200
Subject: [PATCH 01/11] Use new HorizontalScrollContainer in artist pages

To show better scroll indicators + drag to scroll for the albums sections
---
 frontend/js/src/artist/ArtistPage.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/js/src/artist/ArtistPage.tsx b/frontend/js/src/artist/ArtistPage.tsx
index b2f68f8701..a3fa5f5389 100644
--- a/frontend/js/src/artist/ArtistPage.tsx
+++ b/frontend/js/src/artist/ArtistPage.tsx
@@ -40,6 +40,7 @@ import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerCont
 import SimilarArtistComponent from "../explore/music-neighborhood/components/SimilarArtist";
 import CBReviewModal from "../cb-review/CBReviewModal";
 import Pill from "../components/Pill";
+import HorizontalScrollContainer from "../components/HorizontalScrollContainer";
 
 function SortingButtons({
   sort,
@@ -479,13 +480,13 @@ export default function ArtistPage(): JSX.Element {
               <h3 className="header-with-line">{type}</h3>
               <SortingButtons sort={sort} setSort={setSort} />
             </div>
-            <div
-              className={`cover-art-container dragscroll ${
+            <HorizontalScrollContainer
+              className={`cover-art-container ${
                 rgGroup.length <= COVER_ART_SINGLE_ROW_COUNT ? "single-row" : ""
               }`}
             >
               {rgGroup.map(getReleaseCard)}
-            </div>
+            </HorizontalScrollContainer>
           </div>
         ))}
       </div>

From 9f79e65557fd89af0ea5e20da69d70bfbf8f799f Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 16:00:33 +0200
Subject: [PATCH 02/11] Tweak HorizontalScrollContainer

---
 frontend/css/scroll-container.less            |  8 +++-
 .../components/HorizontalScrollContainer.tsx  | 42 +++++++++----------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
index 5bc2337e91..fb7dada927 100644
--- a/frontend/css/scroll-container.less
+++ b/frontend/css/scroll-container.less
@@ -1,10 +1,16 @@
 .horizontal-scroll-container {
   position: relative;
 
+  .horizontal-scroll-container.dragging .horizontal-scroll * {
+    // Prevent text selection and interactions when the user is actively dragging to scroll
+    pointer-events: none;
+    user-select: none;
+}
+
   .horizontal-scroll {
+    overflow-x: auto;
     .small-scrollbar();
     &.no-scrollbar {
-      overflow-x: scroll;
       /* Hide the scrollbar: */
       -ms-overflow-style: none; /* Internet Explorer and Edge */
       scrollbar-width: none; /* Firefox */
diff --git a/frontend/js/src/components/HorizontalScrollContainer.tsx b/frontend/js/src/components/HorizontalScrollContainer.tsx
index daa2541a86..daa3de29ea 100644
--- a/frontend/js/src/components/HorizontalScrollContainer.tsx
+++ b/frontend/js/src/components/HorizontalScrollContainer.tsx
@@ -13,6 +13,9 @@ type HorizontalScrollContainerProps = {
   className?: string;
 };
 
+// How many pixels do the arrow buttons scroll?
+const MANUAL_SCROLL_AMOUNT = 500;
+
 export default function HorizontalScrollContainer({
   showScrollbar = true,
   enableDragScroll = true,
@@ -25,32 +28,27 @@ export default function HorizontalScrollContainer({
     applyRubberBandEffect: true,
   });
 
-  const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    // Call the dragScrolluse-draggable-safe hook event
+  const onMouseDown: React.MouseEventHandler<HTMLElement> = (event) => {
+    // Call the use-draggable-scroll-safe hook event
     events.onMouseDown(event);
     // Set our own class to allow for snap-scroll
-    (event.target as HTMLDivElement)?.parentElement?.classList.add("dragging");
+    (event.target as HTMLElement)?.parentElement?.classList.add("dragging");
   };
-  const onMouseUp: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    (event.target as HTMLDivElement)?.parentElement?.classList.remove(
-      "dragging"
-    );
+  const onMouseUp: React.MouseEventHandler<HTMLElement> = (event) => {
+    (event.target as HTMLElement)?.parentElement?.classList.remove("dragging");
   };
 
-  const onScroll: React.ReactEventHandler<HTMLDivElement> = (event) => {
-    const element = event.target as HTMLDivElement;
+  const onScroll: React.ReactEventHandler<HTMLElement> = (event) => {
+    const element = event.target as HTMLElement;
     const parent = element.parentElement;
     if (!element || !parent) {
       return;
     }
-    // calculate horizontal scroll percentage
-    const scrollPercentage =
-      (100 * element.scrollLeft) / (element.scrollWidth - element.clientWidth);
 
-    if (scrollPercentage > 95) {
+    if (element.scrollWidth - element.scrollLeft >= MANUAL_SCROLL_AMOUNT) {
       parent.classList.add("scroll-end");
       parent.classList.remove("scroll-start");
-    } else if (scrollPercentage < 5) {
+    } else if (element.scrollLeft <= MANUAL_SCROLL_AMOUNT) {
       parent.classList.add("scroll-start");
       parent.classList.remove("scroll-end");
     } else {
@@ -58,34 +56,36 @@ export default function HorizontalScrollContainer({
       parent.classList.remove("scroll-start");
     }
   };
+  const throttledOnScroll = throttle(onScroll, 400, { leading: true });
 
-  const manualScroll: React.ReactEventHandler<HTMLElement> = (event) => {
+  const onManualScroll: React.ReactEventHandler<HTMLElement> = (event) => {
     if (!scrollContainerRef?.current) {
       return;
     }
     if (event?.currentTarget.classList.contains("forward")) {
       scrollContainerRef.current.scrollBy({
-        left: 300,
+        left: MANUAL_SCROLL_AMOUNT,
         top: 0,
         behavior: "smooth",
       });
     } else {
       scrollContainerRef.current.scrollBy({
-        left: -300,
+        left: -MANUAL_SCROLL_AMOUNT,
         top: 0,
         behavior: "smooth",
       });
     }
+    // Also call the onScroll (throttled) event to ensure
+    // the expected CSS classes are applied to the container
+    throttledOnScroll(event);
   };
 
-  const throttledOnScroll = throttle(onScroll, 400, { leading: true });
-
   return (
     <div className="horizontal-scroll-container scroll-start">
       <button
         className="nav-button backward"
         type="button"
-        onClick={manualScroll}
+        onClick={onManualScroll}
         tabIndex={0}
       >
         <FontAwesomeIcon icon={faChevronLeft} />
@@ -106,7 +106,7 @@ export default function HorizontalScrollContainer({
       <button
         className="nav-button forward"
         type="button"
-        onClick={manualScroll}
+        onClick={onManualScroll}
         tabIndex={0}
       >
         <FontAwesomeIcon icon={faChevronRight} />

From 3920053c6e2ab2719b2dc9363c0095c8e6e18f9d Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 16:45:59 +0200
Subject: [PATCH 03/11] Fix scrolling indicators behavior

+ memoize functions to avoid recreating them unnecessarily
---
 .../components/HorizontalScrollContainer.tsx  | 116 +++++++++++-------
 1 file changed, 70 insertions(+), 46 deletions(-)

diff --git a/frontend/js/src/components/HorizontalScrollContainer.tsx b/frontend/js/src/components/HorizontalScrollContainer.tsx
index daa3de29ea..b226583103 100644
--- a/frontend/js/src/components/HorizontalScrollContainer.tsx
+++ b/frontend/js/src/components/HorizontalScrollContainer.tsx
@@ -27,58 +27,82 @@ export default function HorizontalScrollContainer({
   const { events } = useDraggable(scrollContainerRef, {
     applyRubberBandEffect: true,
   });
+  const { onMouseDown: draggableOnMouseDown } = events;
 
-  const onMouseDown: React.MouseEventHandler<HTMLElement> = (event) => {
-    // Call the use-draggable-scroll-safe hook event
-    events.onMouseDown(event);
-    // Set our own class to allow for snap-scroll
-    (event.target as HTMLElement)?.parentElement?.classList.add("dragging");
-  };
-  const onMouseUp: React.MouseEventHandler<HTMLElement> = (event) => {
-    (event.target as HTMLElement)?.parentElement?.classList.remove("dragging");
-  };
+  const onMouseDown: React.MouseEventHandler<HTMLElement> = React.useCallback(
+    (event) => {
+      // Call the use-draggable-scroll-safe hook event
+      draggableOnMouseDown(event);
+      // Set our own class to allow for snap-scroll
+      (event.target as HTMLElement)?.parentElement?.classList.add("dragging");
+    },
+    [draggableOnMouseDown]
+  );
 
-  const onScroll: React.ReactEventHandler<HTMLElement> = (event) => {
-    const element = event.target as HTMLElement;
-    const parent = element.parentElement;
-    if (!element || !parent) {
-      return;
-    }
+  const onMouseUp: React.MouseEventHandler<HTMLElement> = React.useCallback(
+    (event) => {
+      (event.target as HTMLElement)?.parentElement?.classList.remove(
+        "dragging"
+      );
+    },
+    []
+  );
+
+  const onScroll: React.ReactEventHandler<HTMLElement> = React.useCallback(
+    (event) => {
+      const element = scrollContainerRef?.current;
+      const parent = element?.parentElement;
+      if (!element || !parent) {
+        return;
+      }
 
-    if (element.scrollWidth - element.scrollLeft >= MANUAL_SCROLL_AMOUNT) {
-      parent.classList.add("scroll-end");
-      parent.classList.remove("scroll-start");
-    } else if (element.scrollLeft <= MANUAL_SCROLL_AMOUNT) {
-      parent.classList.add("scroll-start");
-      parent.classList.remove("scroll-end");
-    } else {
       parent.classList.remove("scroll-end");
       parent.classList.remove("scroll-start");
-    }
-  };
-  const throttledOnScroll = throttle(onScroll, 400, { leading: true });
 
-  const onManualScroll: React.ReactEventHandler<HTMLElement> = (event) => {
-    if (!scrollContainerRef?.current) {
-      return;
-    }
-    if (event?.currentTarget.classList.contains("forward")) {
-      scrollContainerRef.current.scrollBy({
-        left: MANUAL_SCROLL_AMOUNT,
-        top: 0,
-        behavior: "smooth",
-      });
-    } else {
-      scrollContainerRef.current.scrollBy({
-        left: -MANUAL_SCROLL_AMOUNT,
-        top: 0,
-        behavior: "smooth",
-      });
-    }
-    // Also call the onScroll (throttled) event to ensure
-    // the expected CSS classes are applied to the container
-    throttledOnScroll(event);
-  };
+      if (element.scrollLeft < MANUAL_SCROLL_AMOUNT) {
+        // We are at the beginning of the container and haven't scrolled more than MANUAL_SCROLL_AMOUNT
+        parent.classList.add("scroll-start");
+      } else if (
+        // We have scrolled to the end of the container, i.e. there is less than MANUAL_SCROLL_AMOUNT before the end of the scroll
+        // (with a 2px adjustement)
+        element.scrollWidth - element.scrollLeft - element.clientWidth <=
+        MANUAL_SCROLL_AMOUNT - 2
+      ) {
+        parent.classList.add("scroll-end");
+      }
+    },
+    []
+  );
+
+  const throttledOnScroll = React.useMemo(
+    () => throttle(onScroll, 400, { leading: true }),
+    [onScroll]
+  );
+
+  const onManualScroll: React.ReactEventHandler<HTMLElement> = React.useCallback(
+    (event) => {
+      if (!scrollContainerRef?.current) {
+        return;
+      }
+      if (event?.currentTarget.classList.contains("forward")) {
+        scrollContainerRef.current.scrollBy({
+          left: MANUAL_SCROLL_AMOUNT,
+          top: 0,
+          behavior: "smooth",
+        });
+      } else {
+        scrollContainerRef.current.scrollBy({
+          left: -MANUAL_SCROLL_AMOUNT,
+          top: 0,
+          behavior: "smooth",
+        });
+      }
+      // Also call the onScroll (throttled) event to ensure
+      // the expected CSS classes are applied to the container
+      throttledOnScroll(event);
+    },
+    [throttledOnScroll]
+  );
 
   return (
     <div className="horizontal-scroll-container scroll-start">

From 204c5fe601e7b3660d8e172b29b80c4d9e3ee45b Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 17:33:06 +0200
Subject: [PATCH 04/11] HorizontalScroll: memoize event callbacks

Optimize a bit considering some of these functions don't change and should really never be recreated
---
 .../components/HorizontalScrollContainer.tsx  | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/js/src/components/HorizontalScrollContainer.tsx b/frontend/js/src/components/HorizontalScrollContainer.tsx
index b226583103..263485b271 100644
--- a/frontend/js/src/components/HorizontalScrollContainer.tsx
+++ b/frontend/js/src/components/HorizontalScrollContainer.tsx
@@ -48,31 +48,28 @@ export default function HorizontalScrollContainer({
     []
   );
 
-  const onScroll: React.ReactEventHandler<HTMLElement> = React.useCallback(
-    (event) => {
-      const element = scrollContainerRef?.current;
-      const parent = element?.parentElement;
-      if (!element || !parent) {
-        return;
-      }
+  const onScroll = React.useCallback(() => {
+    const element = scrollContainerRef?.current;
+    const parent = element?.parentElement;
+    if (!element || !parent) {
+      return;
+    }
 
-      parent.classList.remove("scroll-end");
-      parent.classList.remove("scroll-start");
+    parent.classList.remove("scroll-end");
+    parent.classList.remove("scroll-start");
 
-      if (element.scrollLeft < MANUAL_SCROLL_AMOUNT) {
-        // We are at the beginning of the container and haven't scrolled more than MANUAL_SCROLL_AMOUNT
-        parent.classList.add("scroll-start");
-      } else if (
-        // We have scrolled to the end of the container, i.e. there is less than MANUAL_SCROLL_AMOUNT before the end of the scroll
-        // (with a 2px adjustement)
-        element.scrollWidth - element.scrollLeft - element.clientWidth <=
-        MANUAL_SCROLL_AMOUNT - 2
-      ) {
-        parent.classList.add("scroll-end");
-      }
-    },
-    []
-  );
+    if (element.scrollLeft < MANUAL_SCROLL_AMOUNT) {
+      // We are at the beginning of the container and haven't scrolled more than MANUAL_SCROLL_AMOUNT
+      parent.classList.add("scroll-start");
+    } else if (
+      // We have scrolled to the end of the container, i.e. there is less than MANUAL_SCROLL_AMOUNT before the end of the scroll
+      // (with a 2px adjustement)
+      element.scrollWidth - element.scrollLeft - element.clientWidth <=
+      MANUAL_SCROLL_AMOUNT - 2
+    ) {
+      parent.classList.add("scroll-end");
+    }
+  }, []);
 
   const throttledOnScroll = React.useMemo(
     () => throttle(onScroll, 400, { leading: true }),
@@ -99,13 +96,18 @@ export default function HorizontalScrollContainer({
       }
       // Also call the onScroll (throttled) event to ensure
       // the expected CSS classes are applied to the container
-      throttledOnScroll(event);
+      throttledOnScroll();
     },
     [throttledOnScroll]
   );
 
+  React.useEffect(() => {
+    // Run once on startup to set up expected CSS classes applied to the container
+    onScroll();
+  }, []);
+
   return (
-    <div className="horizontal-scroll-container scroll-start">
+    <div className="horizontal-scroll-container">
       <button
         className="nav-button backward"
         type="button"

From b228b6845ec17780b452ceadeb4bc7b33aac921f Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 17:38:35 +0200
Subject: [PATCH 05/11] HorizontalScroll: Hide nav arrows when container does
 not overflow

---
 frontend/css/scroll-container.less                       | 4 ++++
 frontend/js/src/components/HorizontalScrollContainer.tsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
index fb7dada927..c9f5b1a509 100644
--- a/frontend/css/scroll-container.less
+++ b/frontend/css/scroll-container.less
@@ -48,6 +48,10 @@
     opacity: 0;
     pointer-events: none;
   }
+  // Hide arrow buttons when the container does not overflow (class added with javascript)
+  &.no-scroll .nav-button {
+    display: none;
+  }
 }
 
 .dragscroll {
diff --git a/frontend/js/src/components/HorizontalScrollContainer.tsx b/frontend/js/src/components/HorizontalScrollContainer.tsx
index 263485b271..6d2a3d97fe 100644
--- a/frontend/js/src/components/HorizontalScrollContainer.tsx
+++ b/frontend/js/src/components/HorizontalScrollContainer.tsx
@@ -55,6 +55,10 @@ export default function HorizontalScrollContainer({
       return;
     }
 
+    // Set up appropriate CSS classes to show or hide nav buttons
+    if (element.scrollWidth <= element.clientWidth) {
+      parent.classList.add("no-scroll");
+    }
     parent.classList.remove("scroll-end");
     parent.classList.remove("scroll-start");
 

From ac5a77fdef1fd270876e407ed2c00611ad266b06 Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 18:10:31 +0200
Subject: [PATCH 06/11] HorizontalScroll: Adapt to mobile devices

---
 frontend/css/scroll-container.less                  |  4 ++--
 .../js/src/components/HorizontalScrollContainer.tsx | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
index c9f5b1a509..dd25451682 100644
--- a/frontend/css/scroll-container.less
+++ b/frontend/css/scroll-container.less
@@ -35,11 +35,11 @@
     &.backward {
       background: linear-gradient(to right, @white 10%, transparent);
       text-align: left;
-      left: 0;
+      left: -1px;
     }
     &.forward {
       background: linear-gradient(to left, @white 10%, transparent);
-      right: 0;
+      right: -1px;
       text-align: right;
     }
   }
diff --git a/frontend/js/src/components/HorizontalScrollContainer.tsx b/frontend/js/src/components/HorizontalScrollContainer.tsx
index 6d2a3d97fe..d42e430497 100644
--- a/frontend/js/src/components/HorizontalScrollContainer.tsx
+++ b/frontend/js/src/components/HorizontalScrollContainer.tsx
@@ -54,6 +54,11 @@ export default function HorizontalScrollContainer({
     if (!element || !parent) {
       return;
     }
+    // Don't expect so big a scroll before showing nav arrows on smaller screen sizes
+    const requiredMinimumScrollAmount = Math.min(
+      MANUAL_SCROLL_AMOUNT / 2,
+      element.clientWidth / 2
+    );
 
     // Set up appropriate CSS classes to show or hide nav buttons
     if (element.scrollWidth <= element.clientWidth) {
@@ -62,14 +67,14 @@ export default function HorizontalScrollContainer({
     parent.classList.remove("scroll-end");
     parent.classList.remove("scroll-start");
 
-    if (element.scrollLeft < MANUAL_SCROLL_AMOUNT) {
-      // We are at the beginning of the container and haven't scrolled more than MANUAL_SCROLL_AMOUNT
+    if (element.scrollLeft < requiredMinimumScrollAmount) {
+      // We are at the beginning of the container and haven't scrolled more than requiredMinimumScrollAmount
       parent.classList.add("scroll-start");
     } else if (
-      // We have scrolled to the end of the container, i.e. there is less than MANUAL_SCROLL_AMOUNT before the end of the scroll
+      // We have scrolled to the end of the container, i.e. there is less than requiredMinimumScrollAmount before the end of the scroll
       // (with a 2px adjustement)
       element.scrollWidth - element.scrollLeft - element.clientWidth <=
-      MANUAL_SCROLL_AMOUNT - 2
+      requiredMinimumScrollAmount - 2
     ) {
       parent.classList.add("scroll-end");
     }

From 68190d1c49122269279c7a21dd2352e301053e6a Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 18:10:44 +0200
Subject: [PATCH 07/11] Cleanup unused classes

---
 frontend/js/src/artist/ArtistPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/js/src/artist/ArtistPage.tsx b/frontend/js/src/artist/ArtistPage.tsx
index a3fa5f5389..0f0624980e 100644
--- a/frontend/js/src/artist/ArtistPage.tsx
+++ b/frontend/js/src/artist/ArtistPage.tsx
@@ -475,7 +475,7 @@ export default function ArtistPage(): JSX.Element {
           )}
         </div>
         {Object.entries(groupedReleaseGroups).map(([type, rgGroup]) => (
-          <div className="albums full-width scroll-start">
+          <div className="albums">
             <div className="listen-header">
               <h3 className="header-with-line">{type}</h3>
               <SortingButtons sort={sort} setSort={setSort} />

From 66ef82508af96f32b73b7755eb19cb7d28980725 Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 18:17:21 +0200
Subject: [PATCH 08/11] Linting

---
 frontend/css/scroll-container.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
index dd25451682..cce6d7c03c 100644
--- a/frontend/css/scroll-container.less
+++ b/frontend/css/scroll-container.less
@@ -5,7 +5,7 @@
     // Prevent text selection and interactions when the user is actively dragging to scroll
     pointer-events: none;
     user-select: none;
-}
+  }
 
   .horizontal-scroll {
     overflow-x: auto;

From 5e9d882cfe181877ef0959fb688de66b5d29fb9b Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 19:03:33 +0200
Subject: [PATCH 09/11] Force display:none in hide-image class

Resolves an issue when scrolling through album grids on the artist pages,  as images are being lazy loaded the height of the DOM element changes style making the grid items move around in a jarring way.
---
 frontend/css/release-card.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/css/release-card.less b/frontend/css/release-card.less
index d04b32945f..0efd6a39af 100644
--- a/frontend/css/release-card.less
+++ b/frontend/css/release-card.less
@@ -116,7 +116,7 @@
   }
 
   .release-coverart.hide-image {
-    display: none;
+    display: none !important;
     height: 0;
   }
 

From 24a0c629bee625c11c5995230a0f827b5f2fa0ca Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Thu, 10 Oct 2024 19:46:07 +0200
Subject: [PATCH 10/11] Artist Page: allow expanding popular tracks

 Adds a "See more" button that was thought of originally but commented out, to allow expanding the list of popular tracks
---
 frontend/css/entity-pages.less        | 18 ++++++++++--------
 frontend/js/src/artist/ArtistPage.tsx | 18 +++++++++++++-----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/css/entity-pages.less b/frontend/css/entity-pages.less
index 215badc0cb..6a76c00901 100644
--- a/frontend/css/entity-pages.less
+++ b/frontend/css/entity-pages.less
@@ -117,19 +117,21 @@
       min-height: 150px;
       min-width: 0;
       .artist-page& {
-        max-height: 520px;
+        max-height: 500px;
         overflow-y: hidden;
         border-bottom-style: inset;
         position: relative;
-        &::after {
-          content: "";
-          background-image: @white-gradient;
-          position: absolute;
-          bottom: 0;
-          height: 8em;
-          width: 100%;
+        &.expanded {
+          max-height: initial;
+          padding-bottom: 4em;
         }
       }
+
+      .read-more {
+        bottom: 0;
+        padding: 1em 0;
+      }
+
       .album-page& .listen-card .track-position {
         flex: 0 3em;
         align-self: center;
diff --git a/frontend/js/src/artist/ArtistPage.tsx b/frontend/js/src/artist/ArtistPage.tsx
index 0f0624980e..d6bc22e76c 100644
--- a/frontend/js/src/artist/ArtistPage.tsx
+++ b/frontend/js/src/artist/ArtistPage.tsx
@@ -122,6 +122,10 @@ export default function ArtistPage(): JSX.Element {
     "release_date"
   );
 
+  const [expandPopularTracks, setExpandPopularTracks] = React.useState<boolean>(
+    false
+  );
+
   const rgGroups = groupBy(
     releaseGroups,
     (rg) =>
@@ -375,7 +379,7 @@ export default function ArtistPage(): JSX.Element {
         />
       </div>
       <div className="entity-page-content">
-        <div className="tracks">
+        <div className={`tracks ${expandPopularTracks ? "expanded" : ""}`}>
           <div className="header">
             <h3 className="header-with-line">
               Popular tracks
@@ -420,11 +424,15 @@ export default function ArtistPage(): JSX.Element {
               />
             );
           })}
-          {/* <div className="read-more">
-            <button type="button" className="btn btn-outline">
-              See more…
+          <div className="read-more">
+            <button
+              type="button"
+              className="btn btn-outline"
+              onClick={() => setExpandPopularTracks((prevValue) => !prevValue)}
+            >
+              See {expandPopularTracks ? "less" : "more"}
             </button>
-          </div> */}
+          </div>
         </div>
         <div className="stats">
           <div className="listening-stats card flex-center">

From b0755b5f6cff99ad90bcb1d4a4f8a5a7b8fa58c5 Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Fri, 11 Oct 2024 12:37:37 +0200
Subject: [PATCH 11/11] HortizontalScroll: Place nav buttons higher in z-index

---
 frontend/css/scroll-container.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
index cce6d7c03c..f69031d091 100644
--- a/frontend/css/scroll-container.less
+++ b/frontend/css/scroll-container.less
@@ -29,7 +29,7 @@
     border: none;
     font-size: 2em;
     color: @light-grey;
-    z-index: 1;
+    z-index: 2;
     opacity: 1;
     transition: opacity 300ms linear;
     &.backward {