Mobile: Allow new note and new to-do buttons to wrap (#12163)

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

packages/app-mobile/components/BottomDrawer.tsx

@@ -48,6 +48,8 @@ const useStyles = (theme: ThemeStyle) => {
 				gap: 8,
 				flexDirection: 'row',
 				flexWrap: 'wrap',
+				flexShrink: 1,
+				flexGrow: 1,
 			},
 			modalBackground: {
 				paddingTop: 0,

packages/app-mobile/components/screens/Notes/NewNoteButton.tsx

@@ -30,18 +30,15 @@ const styles = StyleSheet.create({
 		gap: 2,
 	},
 	mainButtonRow: {
-		flexWrap: 'nowrap',
-	},
-	spacer: {
-		flexShrink: 1,
-		flexGrow: 0,
-		width: 12,
+		flexWrap: 'wrap',
+		gap: 6,
 	},
 	shortcutButton: {
 		flexGrow: 1,
 	},
 	mainButton: {
 		flexShrink: 1,
+		flexGrow: 1,
 	},
 	mainButtonLabel: {
 		fontSize: 16,
@@ -85,7 +82,6 @@ const NewNoteButton: React.FC<Props> = _props => {
 				type={ButtonType.Secondary}
 				size={ButtonSize.Larger}
 			>{_('New to-do')}</TextButton>
-			<View style={styles.spacer}/>
 			<TextButton
 				touchableRef={newNoteRef}
 				icon='file-document-outline'