Improve add server screen layout in landscape

screens/AddServerScreen.js

@@ -4,7 +4,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useHeaderHeight } from '@react-navigation/stack';
 import { useTranslation } from 'react-i18next';
 
 import ServerInput from '../components/ServerInput';
@@ -12,9 +14,17 @@ import Colors from '../constants/Colors';
 
 const AddServerScreen = () => {
 	const { t } = useTranslation();
+	const headerHeight = useHeaderHeight();
 
 	return (
-		<View style={styles.container}>
+		<KeyboardAvoidingView
+			style={styles.screen}
+			behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+		>
+			<SafeAreaView
+				style={{...styles.container, paddingBottom: headerHeight}}
+				edges={['right', 'bottom', 'left']}
+			>
 				<View style={styles.logoContainer}>
 					<Image
 						style={styles.logoImage}
@@ -23,39 +33,33 @@ const AddServerScreen = () => {
 					/>
 				</View>
 				<ServerInput
-				containerStyle={styles.serverTextContainer}
 					label={t('addServer.address')}
 					placeholder='https://jellyfin.org'
 					t={t}
 				/>
-		</View>
+			</SafeAreaView>
+		</KeyboardAvoidingView>
 	);
 };
 
 const styles = StyleSheet.create({
-	serverTextContainer: {
+	screen: {
 		flex: 1,
-		alignContent: 'flex-start'
+		backgroundColor: Colors.backgroundColor
 	},
 	container: {
 		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: Colors.backgroundColor
+		justifyContent: 'space-evenly'
 	},
 	logoContainer: {
-		marginTop: 80,
-		marginBottom: 48,
-		alignItems: 'center',
-		justifyContent: 'center'
+		alignItems: 'center'
 	},
 	logoImage: {
-		width: '90%',
-		height: undefined,
-		maxWidth: 481,
-		maxHeight: 151,
-		// Aspect ration of the logo
-		aspectRatio: 3.18253
+		marginVertical: 10,
+		width: 481,
+		height: 151,
+		maxWidth: '90%',
+		resizeMode: 'contain'
 	}
 });