Format album tags to handle multiple artists

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)
+    ),
   });
 };
 

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,
   });
 };

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;