Updated SongCardGrids in HomeView to use itemDimension

front/components/SongCardGrid.tsx

@@ -5,7 +5,8 @@ import { Heading, VStack } from 'native-base';
 
 type SongCardGrid = {
 	songs: Parameters<typeof SongCard>[0][];
-	maxItemPerRow?: number,
+	maxItemsPerRow?: number,
+	itemDimension?: number,
 	heading?: JSX.Element,
 }
 
@@ -13,8 +14,9 @@ const SongCardGrid = (props: SongCardGrid) => {
 	return <VStack>
 		<Heading>{props.heading}</Heading>
 		<FlatGrid
-			itemDimension={250}
-			additionalRowStyle={{ justifyContent: 'space-between' }}
+			maxItemsPerRow={props.maxItemsPerRow}
+			itemDimension={props.itemDimension ?? (props.maxItemsPerRow ? undefined : 150)}
+			additionalRowStyle={{ justifyContent: 'flex-start' }}
 			data={props.songs}
 			renderItem={({ item }) => <SongCard {...item} /> }
 			spacing={10}

front/views/HomeView.tsx

@@ -42,6 +42,7 @@ const HomeView = () => {
 				<Box flex={2}>
 					<SongCardGrid
 						heading={<Translate translationKey='goNextStep'/>}
+						itemDimension={screenSize == 'small' ? 250 : 200}
 						songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 							.map((song) => ({
 								albumCover: song.cover,
@@ -63,7 +64,7 @@ const HomeView = () => {
 						<Box flex={1} padding={5}>
 							<SongCardGrid
 								heading={<Translate translationKey='recentlyPlayed'/>}
-								maxItemPerRow={2}
+								itemDimension={screenSize == 'small' ? 200 : 170}
 								songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 									.map((song) => ({
 										albumCover: song.cover,
@@ -89,7 +90,7 @@ const HomeView = () => {
 									/>
 								</Box>
 								<SongCardGrid
-									maxItemPerRow={2}
+									itemDimension={screenSize == 'small' ? 150 : 120}
 									heading={<Translate translationKey='lastSearched'/>}
 									songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 										.map((song) => ({