Resolve track pop-up spacing

src/screens/Music/stacks/components/TrackListView.tsx

@@ -9,12 +9,12 @@ import { THEME_COLOR } from 'CONSTANTS';
 import TouchableHandler from 'components/TouchableHandler';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TrackPlayer from 'react-native-track-player';
-import Button from 'components/Button';
 import Play from 'assets/play.svg';
 import Shuffle from 'assets/shuffle.svg';
 import useDefaultStyles from 'components/Colors';
 import usePlayTracks from 'utility/usePlayTracks';
 import { EntityId } from '@reduxjs/toolkit';
+import { WrappableButtonRow, WrappableButton } from 'components/WrappableButtonRow';
 
 const Screen = Dimensions.get('screen');
 
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
     artist: {
         fontSize: 24,
         opacity: 0.5,
-        marginBottom: 24
+        marginBottom: 12
     },
     index: {
         width: 20,
@@ -109,10 +109,11 @@ const TrackListView: React.FC<TrackListViewProps> = ({
             <AlbumImage source={{ uri: getImage(entityId) }} style={defaultStyles.imageBackground} />
             <Text style={[ defaultStyles.text, styles.name ]} >{title}</Text>
             <Text style={[ defaultStyles.text, styles.artist ]}>{artist}</Text>
-            <Button title={playButtonText} icon={Play} onPress={playEntity} />
-            <View style={{ height: 4 }}></View>
-            <Button title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
-            <View style={{ marginTop: 15 }}>
+            <WrappableButtonRow>
+                <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} />
+                <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
+            </WrappableButtonRow>
+            <View style={{ marginTop: 8 }}>
                 {trackIds.map((trackId, i) =>
                     <TouchableHandler
                         key={trackId}

src/screens/modals/TrackPopupMenu.tsx

@@ -7,24 +7,17 @@ import { SubHeader } from 'components/Typography';
 import styled from 'styled-components/native';
 import usePlayTrack from 'utility/usePlayTrack';
 import { t } from '@localisation';
-import Button from 'components/Button';
 import PlayIcon from 'assets/play.svg';
 import QueueAppendIcon from 'assets/queue-append.svg';
 import Text from 'components/Text';
+import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
 
 type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;
 
 const Container = styled.View`
     padding: 20px;
-`;
-
-const Buttons = styled.View`
-    margin-top: 20px;
-`;
-
-const ButtonSpacing = styled.View`
-    width: 8px;
-    height: 4px;
+    flex: 0 0 auto;
+    flex-direction: column;
 `;
 
 function TrackPopupMenu() {
@@ -51,13 +44,12 @@ function TrackPopupMenu() {
     return (
         <Modal fullSize={false}>
             <Container>
-                <SubHeader>{track?.Name}</SubHeader>
-                <Text>{track?.Album} - {track?.AlbumArtist}</Text>
-                <Buttons>
-                    <Button title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
-                    <ButtonSpacing />
-                    <Button title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
-                </Buttons>
+                <SubHeader style={{ textAlign: 'center' }}>{track?.Name}</SubHeader>
+                <Text style={{ marginBottom: 18, textAlign: 'center' }}>{track?.Album} - {track?.AlbumArtist}</Text>
+                <WrappableButtonRow>
+                    <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
+                    <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
+                </WrappableButtonRow>
             </Container>
         </Modal>
     );