From 966c57db780c46fa7ea72a267e79d8c7af22afd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 22 Feb 2023 23:19:48 +0100
Subject: [PATCH] fixed titles and artists too long that breaked the layout,
 reduced the spacing of SongCardGrid and use itemDimesnion instead of
 NbElementsPerRow to see better on mobile

---
 front/components/SongCard.tsx     | 4 ++--
 front/components/SongCardGrid.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/front/components/SongCard.tsx b/front/components/SongCard.tsx
index 9279467..45fdf74 100644
--- a/front/components/SongCard.tsx
+++ b/front/components/SongCard.tsx
@@ -25,10 +25,10 @@ const SongCard = (props: SongCardProps) => {
 				alt={[props.songTitle, props.artistName].join('-')}
 			/>
 			<VStack padding={3}>
-				<Text bold fontSize='md'>
+				<Text isTruncated bold fontSize='md' noOfLines={2} height={50}>
 					{songTitle}
 				</Text>
-				<Text>
+				<Text isTruncated >
 					{artistName}
 				</Text>
 			</VStack>
diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx
index a336828..966d7f2 100644
--- a/front/components/SongCardGrid.tsx
+++ b/front/components/SongCardGrid.tsx
@@ -13,11 +13,11 @@ const SongCardGrid = (props: SongCardGrid) => {
 	return <VStack>
 		<Heading>{props.heading}</Heading>
 		<FlatGrid
-			maxItemsPerRow={props.maxItemPerRow ?? 5}
+			itemDimension={250}
 			additionalRowStyle={{ justifyContent: 'space-between' }}
 			data={props.songs}
 			renderItem={({ item }) => <SongCard {...item} /> }
-			spacing={20}
+			spacing={10}
 		/>
 	</VStack>
 }