Allow icons to wrap on the header page

This commit is contained in:
Zoe Roux 2024-01-22 20:26:27 +01:00
parent 6ff41c55fe
commit 9c03bac804
2 changed files with 83 additions and 66 deletions

View File

@ -87,5 +87,5 @@ export const usePopup = () => {
return () => removePortal("popup");
}, [current, addPortal, removePortal]);
return [setPopup, close];
return [setPopup, close] as const;
};

View File

@ -213,7 +213,17 @@ export const TitleLine = ({
)}
</Skeleton>
)}
<View {...css({ flexDirection: "row", alignItems: "center" })}>
<View
{...css({
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
justifyContent: "center",
})}
>
<View
{...css({ flexDirection: "row", alignItems: "center", justifyContent: "center" })}
>
{playHref !== null && (
<IconFab
icon={PlayArrow}
@ -257,11 +267,17 @@ export const TitleLine = ({
icon={MovieInfo}
color={{ xs: theme.user.contrast, md: theme.colors.white }}
onPress={() =>
setPopup(<MediaInfoPopup mediaType={"movie"} mediaSlug={slug!} close={close} />)
setPopup(
<MediaInfoPopup mediaType={"movie"} mediaSlug={slug!} close={close} />,
)
}
/>
</>
)}
</View>
<View
{...css({ flexDirection: "row", alignItems: "center", justifyContent: "center" })}
>
{rating !== null && (
<>
<DottedSeparator
@ -286,6 +302,7 @@ export const TitleLine = ({
</View>
</View>
</View>
</View>
<View
{...css([
{