stripe embedded and other fixes

src/screens/Library/MusicDetails.web.js

@@ -16,6 +16,7 @@ import {
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import {
@@ -74,6 +75,8 @@ const MusicDetails = ({ route }) => {
   const hasAutoPlayedRef = React.useRef(false);
   const { isLooping, setLooping } = usePlayer() || {};
   const isWeb = Platform.OS === "web";
+  const { width: windowWidth = 0 } = useWindowDimensions();
+  const isCompactLayout = (windowWidth || 0) < 1200;
   const handleBackPress = useCallback(() => {
     goBack();
   }, []);
@@ -964,6 +967,7 @@ const MusicDetails = ({ route }) => {
       headerType="NAVIGATION"
       hideBackButton={isWeb}
       topStickyContent={renderWebBackButton}
+      width={isCompactLayout ? "100%" : undefined}
       title={action === "userProfile" ? "Mon profil" : "Détail musique"}
       backgroundImg={
         action === "userProfile"
@@ -993,11 +997,12 @@ const MusicDetails = ({ route }) => {
         style={{
           flex: 1,
           paddingBottom: gutters * 2,
-          flexDirection: "row",
+          flexDirection: isCompactLayout ? "column" : "row",
           justifyContent: "center",
-          alignItems: "center",
+          alignItems: isCompactLayout ? "stretch" : "center",
           height: "auto",
-          gap: 24,
+          gap: isCompactLayout ? 16 : 24,
+          width: "100%",
         }}
       >
         {/* Left column: player */}
@@ -1005,13 +1010,14 @@ const MusicDetails = ({ route }) => {
           intensity={40}
           style={{
             flex: 1,
-            paddingRight: 8,
-            height: 400,
+            paddingRight: isCompactLayout ? 0 : 8,
+            height: isCompactLayout ? undefined : 400,
             borderRadius: 12,
             padding: 10,
             borderWidth: 1,
             borderColor: Palette.transparentWhite,
-            maxWidth: "50%",
+            maxWidth: isCompactLayout ? "100%" : "50%",
+            width: "100%",
           }}
         >
           <View>
@@ -1159,20 +1165,25 @@ const MusicDetails = ({ route }) => {
             intensity={40}
             style={{
               flex: 1,
-              paddingLeft: 8,
+              paddingLeft: isCompactLayout ? 0 : 8,
               padding: 10,
               borderWidth: 1,
               borderColor: Palette.transparentWhite,
               borderRadius: 12,
-              height: 400,
-              maxWidth: "50%",
+              height: isCompactLayout ? undefined : 400,
+              maxWidth: isCompactLayout ? "100%" : "50%",
+              width: "100%",
+              marginTop: isCompactLayout ? 12 : 0,
             }}
           >
             {sections.length ? (
               <ScrollView
                 ref={lyricsRef}
                 style={{ flex: 1 }}
-                contentContainerStyle={{ paddingBottom: 40, height: 400 }}
+                contentContainerStyle={{
+                  paddingBottom: 40,
+                  ...(isCompactLayout ? {} : { height: 400 }),
+                }}
               >
                 {sections.map((section, sectionIdx) => (
                   <View
@@ -1231,7 +1242,10 @@ const MusicDetails = ({ route }) => {
             ) : description?.length > 0 ? (
               <ScrollView
                 style={{ flex: 1 }}
-                contentContainerStyle={{ paddingBottom: 40 }}
+                contentContainerStyle={{
+                  paddingBottom: 40,
+                  ...(isCompactLayout ? {} : { height: 400 }),
+                }}
               >
                 <Text
                   style={{