From 100c57621bbca9b22af66ff9ea01a601ba9b6b62 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 22 Nov 2021 19:11:06 -0800
Subject: [PATCH] Format album tags to handle multiple artists

---
 src/api/api.ts                   | 4 +++-
 src/api/jellyfinApi.ts           | 5 +++++
 src/components/layout/styled.tsx | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/api/api.ts b/src/api/api.ts
index a348c25..212f3ed 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -405,7 +405,9 @@ export const getArtist = async (options: { id: string }) => {
     biography: infoData.artistInfo2.biography,
     lastFmUrl: infoData.artistInfo2.lastFmUrl,
     externalImageUrl: infoData.artistInfo2.largeImageUrl,
-    similarArtist: infoData.artistInfo2.similarArtist,
+    similarArtist: (infoData.artistInfo2.similarArtist || []).map((entry: any) =>
+      normalizeArtist(entry)
+    ),
   });
 };
 
diff --git a/src/api/jellyfinApi.ts b/src/api/jellyfinApi.ts
index 33ce00b..0808024 100644
--- a/src/api/jellyfinApi.ts
+++ b/src/api/jellyfinApi.ts
@@ -389,8 +389,13 @@ export const getArtist = async (options: { id: string }) => {
     },
   });
 
+  const { data: similarData } = await jellyfinApi.get(`/artists/${options.id}/similar`, {
+    params: { limit: 8 },
+  });
+
   return normalizeArtist({
     ...data,
+    similarArtist: similarData.Items,
     album: albumData.Items,
   });
 };
diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index 5bb29b0..e87ce50 100644
--- a/src/components/layout/styled.tsx
+++ b/src/components/layout/styled.tsx
@@ -239,10 +239,10 @@ export const PageHeaderSubtitleWrapper = styled.span`
 export const PageHeaderSubtitleDataLine = styled.div<{ $top?: boolean }>`
   margin-top: ${(props) => (props.$top ? '0px' : '7px')};
   white-space: nowrap;
-  overflow: visible;
+  overflow: auto;
 
   ::-webkit-scrollbar {
-    height: 0px;
+    height: 4px;
   }
 
   scroll-behavior: smooth;
@@ -284,7 +284,7 @@ export const BlurredBackground = styled.img<{ expanded: boolean }>`
   margin: 0px !important;
   padding: 0px !important;
   width: 100%;
-  height: 210px;
+  height: 212px;
   z-index: -1;
   user-select: none;
   pointer-events: none;