Item detail layout changes

components/ItemDetail/component.tsx

@@ -3,7 +3,7 @@ import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
 import { StackParamList } from "../types";
 import TrackOptions from "./helpers/TrackOptions";
-import { View, XStack, YStack } from "tamagui";
+import { Spacer, View, XStack, YStack } from "tamagui";
 import BlurhashedImage from "../Global/helpers/blurhashed-image";
 import { Text } from "../Global/helpers/text";
 import { Colors } from "../../enums/colors";
@@ -58,7 +58,7 @@ export default function ItemDetail({
                 <YStack 
                     marginLeft={"$0.5"} 
                     justifyContent="flex-start"
-                    alignItems="stretch"
+                    alignContent="space-between"
                 >
                     <Text bold fontSize={"$6"}>
                         { item.Name ?? "Untitled Track" }
@@ -85,8 +85,12 @@ export default function ItemDetail({
                         { item.Album ?? "" }
                     </Text>
 
+                    <Spacer />
+
                     <FavoriteButton item={item} />
                     
+                    <Spacer />
+                    
                     { options ?? <View /> }
                 </YStack>
 

components/ItemDetail/helpers/TrackOptions.tsx

@@ -13,7 +13,7 @@ export default function TrackOptions({
 }) : React.JSX.Element {
     
     return (
-        <XStack>
+        <XStack justifyContent="space-evenly">
             <Icon name="table-column-plus-before" />
 
             <Icon name="table-column-plus-after" />