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"); return () => removePortal("popup");
}, [current, addPortal, removePortal]); }, [current, addPortal, removePortal]);
return [setPopup, close]; return [setPopup, close] as const;
}; };

View File

@ -213,7 +213,17 @@ export const TitleLine = ({
)} )}
</Skeleton> </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 && ( {playHref !== null && (
<IconFab <IconFab
icon={PlayArrow} icon={PlayArrow}
@ -257,11 +267,17 @@ export const TitleLine = ({
icon={MovieInfo} icon={MovieInfo}
color={{ xs: theme.user.contrast, md: theme.colors.white }} color={{ xs: theme.user.contrast, md: theme.colors.white }}
onPress={() => 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 && ( {rating !== null && (
<> <>
<DottedSeparator <DottedSeparator
@ -286,6 +302,7 @@ export const TitleLine = ({
</View> </View>
</View> </View>
</View> </View>
</View>
<View <View
{...css([ {...css([
{ {