last tickets

src/screens/Studio/ComposeSong.web.js

@@ -6,7 +6,13 @@ import React, {
   useState,
 } from "react";
 import { useRoute } from "@react-navigation/native";
-import { Dimensions, FlatList, Modal, Text, View } from "react-native";
+import {
+  FlatList,
+  Modal,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
 import { background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
@@ -28,20 +34,35 @@ import ChooseRhythm from "./ChooseRhythm";
 import CustomizeVoice from "./CustomizeVoice";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
-const { width: windowWidth } = Dimensions.get("window");
 const MUSIC_GENERATION_COIN_COST = 8;
 const CONFIRM_MODAL_MAX_WIDTH = 540;
 const FUNCTIONS_REGION = "europe-west1";
 const VOICE_SECTION_TITLES = ["BASE", "SENSIBILITÉ", "TECHNIQUE"];
 const FIRST_VOICE_STEP_INDEX = 1;
 const OPTIONAL_VOICE_CATEGORIES = new Set(["SENSIBILITÉ", "TECHNIQUE"]);
+const PAGE_WIDTH_RATIO_WEB = 0.6; // keep in sync with Page default width on web
+const PAGE_MAX_WIDTH = 1200;
+const PAGE_HORIZONTAL_PADDING = gutters * 2;
 
 const ComposeSong = () => {
   const scrollRef = useRef(null);
+  const { width: windowWidth } = useWindowDimensions();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [progress, setProgress] = useState(18);
   const [parentLayout, setParentLayout] = useState(null);
-  const containerWidth = parentLayout?.width || windowWidth || 1;
+  const estimatedContainerWidth = useMemo(() => {
+    const safeWindowWidth =
+      typeof windowWidth === "number" && Number.isFinite(windowWidth)
+        ? windowWidth
+        : 0;
+    const estimatedPageWidth = Math.min(
+      safeWindowWidth * PAGE_WIDTH_RATIO_WEB,
+      PAGE_MAX_WIDTH
+    );
+    const paddedWidth = estimatedPageWidth - PAGE_HORIZONTAL_PADDING;
+    return Math.max(1, paddedWidth);
+  }, [windowWidth]);
+  const containerWidth = parentLayout?.width || estimatedContainerWidth;
   const route = useRoute();
   const {
     selectedProjectId,