Resolve track pop-up spacing

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState }  from 'react';
 import { SvgProps } from 'react-native-svg';
 import { 
-    PressableProps, ViewProps, 
+    PressableProps, ViewProps, View,
 } from 'react-native';
 import { THEME_COLOR } from 'CONSTANTS';
 import styled, { css } from 'styled-components/native';
@@ -13,7 +13,6 @@ interface ButtonProps extends PressableProps {
     style?: ViewProps['style'];
 }
 
-
 const BaseButton = styled.Pressable`
     padding: 16px;
     border-radius: 8px;
@@ -32,7 +31,7 @@ const ButtonText = styled.Text<{ active?: boolean }>`
     `}
 `;
 
-export default function Button(props: ButtonProps) {
+const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
     const { icon: Icon, title, ...rest } = props;
     const defaultStyles = useDefaultStyles();
     const [isPressed, setPressed] = useState(false);
@@ -42,6 +41,7 @@ export default function Button(props: ButtonProps) {
     return (
         <BaseButton
             {...rest}
+            ref={ref}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
             style={[ 
@@ -62,4 +62,6 @@ export default function Button(props: ButtonProps) {
             <ButtonText active={isPressed}>{title}</ButtonText>
         </BaseButton>
     );
-}
+});
+
+export default Button;

src/components/Modal.tsx

@@ -16,8 +16,9 @@ const Background = styled(Pressable)`
 const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
     margin: auto 20px;
     padding: 4px;
-    border-radius: 8px;
+    border-radius: 12px;
-    overflow: hidden;
+    flex: 0 0 auto;
+    background: salmon;
     
     ${props => props.fullSize && css`
         flex: 1;
@@ -35,11 +36,9 @@ const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
 
     return (
         <Background style={defaultStyles.modal} onPress={closeModal}>
-            <SafeAreaView style={{ flex: 1 }}>
+            <Container style={defaultStyles.modalInner} fullSize={fullSize}>
-                <Container style={defaultStyles.modalInner} fullSize={fullSize}>
+                {children}
-                    {children}
+            </Container>
-                </Container>
-            </SafeAreaView>
         </Background>
     );
 };

src/components/Typography.ts

@@ -10,4 +10,5 @@ export const Header = styled(Text)`
 export const SubHeader = styled(Text)`
     font-size: 24px;
     margin: 12px 0;
+    font-weight: 500;
 `;

src/components/WrappableButtonRow.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+import Button from './Button';
+
+export const WrappableButtonRow = styled.View`
+    flex: 0 0 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 6px -2px;
+`;
+
+export const WrappableButton = styled(Button)`
+    margin: 2px;
+`;

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} />
+            <WrappableButtonRow>
-            <View style={{ height: 4 }}></View>
+                <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} />
-            <Button title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
+                <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
-            <View style={{ marginTop: 15 }}>
+            </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;
-`;
+    flex: 0 0 auto;
-
+    flex-direction: column;
-const Buttons = styled.View`
-    margin-top: 20px;
-`;
-
-const ButtonSpacing = styled.View`
-    width: 8px;
-    height: 4px;
 `;
 
 function TrackPopupMenu() {
@@ -51,13 +44,12 @@ function TrackPopupMenu() {
     return (
         <Modal fullSize={false}>
             <Container>
-                <SubHeader>{track?.Name}</SubHeader>
+                <SubHeader style={{ textAlign: 'center' }}>{track?.Name}</SubHeader>
-                <Text>{track?.Album} - {track?.AlbumArtist}</Text>
+                <Text style={{ marginBottom: 18, textAlign: 'center' }}>{track?.Album} - {track?.AlbumArtist}</Text>
-                <Buttons>
+                <WrappableButtonRow>
-                    <Button title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
+                    <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
-                    <ButtonSpacing />
+                    <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
-                    <Button title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
+                </WrappableButtonRow>
-                </Buttons>
             </Container>
         </Modal>
     );