web layout

src/components/GradientButton.js

@@ -1,9 +1,9 @@
-import { View, Text, Pressable, Image, FlatList } from "react-native";
 import React from "react";
-import { LinearGradient } from "./LinearGradient/LinearGradient";
+import { Image, Pressable, Text } from "react-native";
 import { Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 import { size } from "../styles/Style";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 
 const GradientButton = ({
   title = "",
@@ -13,12 +13,17 @@ const GradientButton = ({
   containerStyle = {},
   icon,
   disabled = false,
+  maxWidth = null,
 }) => {
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
-      style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}
+      style={{
+        ...containerStyle,
+        opacity: disabled ? 0.6 : 1,
+        maxWidth: maxWidth ? maxWidth : null,
+      }}
     >
       <LinearGradient
         colors={colors}

src/components/ListSelection/ListSelection.js

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from "react";
-import { FlatList, SectionList, Text, View, Platform } from "react-native";
 import { BlurView } from "expo-blur";
+import React, { useMemo, useState } from "react";
+import { FlatList, Platform, SectionList, Text, View } from "react-native";
 import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -30,7 +30,7 @@ const ListSelection = ({
 }) => {
   // Internal fallback state when not provided by parent
   const [internalSelected, setInternalSelected] = useState(
-    variant === "sectioned" ? {} : multiple ? [] : null,
+    variant === "sectioned" ? {} : multiple ? [] : null
   );
   const selected = selectedProp !== undefined ? selectedProp : internalSelected;
   const setSelected =
@@ -170,11 +170,15 @@ const ListSelection = ({
           );
         }}
         renderSectionHeader={({ section: { title } }) => (
-          <View style={{ alignSelf: "flex-start", marginLeft: 10, marginBottom: 6 }}>
+          <View
+            style={{ alignSelf: "flex-start", marginLeft: 10, marginBottom: 6 }}
+          >
             <BlurView
               intensity={40}
               tint="dark"
-              experimentalBlurMethod={Platform.OS !== "ios" ? "dimezisBlurView" : "none"}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
               style={{
                 borderRadius: 18,
                 overflow: "hidden",

src/components/MusicLandHeader.js

@@ -1,9 +1,9 @@
-import { View, Text, Image, Pressable } from "react-native";
 import React from "react";
+import { Image, Pressable, Text, View } from "react-native";
 import { icons } from "../assets";
 import { Palette, Style } from "../styles";
-import ProgressBar from "./ProgressBar";
 import { FONT_FAMILY } from "../styles/Fonts";
+import ProgressBar from "./ProgressBar";
 
 const MusicLandHeader = ({
   onPressBack,
@@ -13,10 +13,7 @@ const MusicLandHeader = ({
 }) => {
   return (
     <View style={{ alignItems: "center", gap: 16 }}>
-      <Image
-        source={icons.musicLandLogo}
-       
-      />
+      <Image source={icons.musicLandLogo} />
       <View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
         <Pressable
           style={{ width: 24, height: 24, ...Style.containerCenter }}