Cleanup studios display in details page

front/src/ui/details/header.tsx

@@ -359,23 +359,22 @@ export const TitleLine = ({
 					}) as any,
 				])}
 			>
-				{studios?.map((x) => (
+				{studios !== null && (
 					<P
-						key={x.slug}
 						{...css({
+							flexWrap: "wrap",
 							color: (theme: Theme) => theme.user.paragraph,
-							display: "flex",
 						})}
 					>
-						{t("show.studio")}:{" "}
+						{t("show.studios")}:{" "}
-						<A
+						{studios.map((studio, i) => (
-							href={`/studio/${x.slug}`}
+							<Fragment key={studio.id}>
-							{...css({ color: (theme) => theme.user.link })}
+								<P {...(css({ m: 0 }) as any)}>{i !== 0 && ", "}</P>
-						>
+								<A href={`/studios/${studio.slug}`}>{studio.name}</A>
-							{x.name}
+							</Fragment>
-						</A>
+						))}
 					</P>
-				))}
+				)}
 			</View>
 		</Container>
 	);