minor fix

src/screens/Library/components/LikedMusic.js

@@ -1,17 +1,22 @@
-import { View, Image, FlatList, Pressable } from "react-native";
 import React from "react";
-import CardContainer from "./CardContainer";
-import { Style } from "../../../styles";
+import { FlatList, Image, Pressable, useWindowDimensions } from "react-native";
 import { img } from "../../../assets";
-import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
+import CardContainer from "./CardContainer";
 
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
     ? userLikedProjects.slice(0, 6)
     : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const numColumns = 3;
+  const gap = 6;
+  const containerGap = 10;
+  const totalGap = gap * (numColumns - 1) + containerGap * 2;
+  const itemWidth = (screenWidth - totalGap) / numColumns;
   return (
     <CardContainer
       label="Musiques likées"
@@ -20,18 +25,25 @@ const LikedMusic = () => {
       <FlatList
         scrollEnabled={false}
         data={items}
-        numColumns={3}
-        contentContainerStyle={{ gap: 10 }}
-        columnWrapperStyle={{ gap: 6 }}
+        numColumns={numColumns}
+        contentContainerStyle={{ gap: containerGap }}
+        columnWrapperStyle={{ gap }}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <Pressable
             style={{ flex: 1 }}
-            onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+            onPress={() =>
+              navigate(Routes.MusicDetails, { projectId: item.id })
+            }
           >
             <Image
-              source={item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
+              source={
+                item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3
+              }
+              style={{
+                height: itemWidth - containerGap,
+                borderRadius: 10,
+              }}
             />
           </Pressable>
         )}

src/screens/Library/components/MusicCard.js

@@ -26,7 +26,6 @@ const MusicCard = ({
 }) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
-  const [open, setOpen] = useState(false);
   const [layout, setLayout] = useState(null);
   const [menuPos, setMenuPos] = useState(0);