Mobile: Increase height of tag association screen to cater for a larger tag list area (#13521)

packages/app-mobile/components/ModalDialog.tsx

@@ -55,15 +55,22 @@ const useStyles = (themeId: number) => {
 const ModalDialog: React.FC<Props> = props => {
 	const styles = useStyles(props.themeId);
 	const theme = themeStyle(props.themeId);
+	const containerStyle = !props.modalProps.containerStyle ? styles.container : {
+		...styles.container,
+		...props.modalProps.containerStyle,
+	};
+	const modalProps = {
+		...props.modalProps,
+		containerStyle,
+	} as Partial<ModalElementProps>;
 
 	return (
 		<Modal
 			transparent={true}
 			visible={true}
 			onRequestClose={null}
-			containerStyle={styles.container}
 			backgroundColor={theme.backgroundColorTransparent2}
-			{...props.modalProps}
+			{...modalProps}
 		>
 			<View style={styles.contentWrapper}>{props.children}</View>
 			<View style={styles.buttonRow}>

packages/app-mobile/components/TagEditor.tsx

@@ -54,7 +54,6 @@ const useStyles = (themeId: number, headerStyle: TextStyle|undefined) => {
 			},
 			tagBoxRoot: {
 				flexDirection: 'column',
-				flexGrow: 0.5,
 				flexShrink: 1,
 			},
 			tagBoxScrollView: {
@@ -86,6 +85,7 @@ const useStyles = (themeId: number, headerStyle: TextStyle|undefined) => {
 				backgroundColor: theme.dividerColor,
 			},
 			tagSearch: {
+				flexGrow: 1,
 				flexShrink: 1,
 			},
 			noTagsLabel: {

packages/app-mobile/components/screens/NoteTagsDialog.tsx

@@ -9,6 +9,7 @@ import TagEditor, { TagEditorMode } from '../TagEditor';
 import { _ } from '@joplin/lib/locale';
 import { useCallback, useEffect, useState } from 'react';
 import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
+import { ViewStyle } from 'react-native';
 
 interface Props {
 	themeId: number;
@@ -22,6 +23,9 @@ const modalPropOverrides = {
 		// Prevent the keyboard from auto-dismissing when tapping outside the search input
 		keyboardShouldPersistTaps: true,
 	},
+	containerStyle: {
+		height: '100%',
+	} as ViewStyle,
 };
 
 const NoteTagsDialogComponent: React.FC<Props> = props => {