Make these SafeAreaViews

components/Login/helpers/server-authentication.tsx

@@ -8,6 +8,7 @@ import { useAuthenticationContext } from "../provider";
 import { H1 } from "../../Global/helpers/text";
 import Button from "../../Global/helpers/button";
 import Input from "../../Global/helpers/input";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function ServerAuthentication(): React.JSX.Element {
     const { username, setUsername } = useAuthenticationContext();
@@ -45,7 +46,7 @@ export default function ServerAuthentication(): React.JSX.Element {
     });
 
     return (
-        <View marginHorizontal={10} flex={1} justifyContent='center'>
+        <SafeAreaView>
             <H1>
                 { `Sign in to ${server?.name ?? "Jellyfin"}`}
             </H1>
@@ -88,6 +89,6 @@ export default function ServerAuthentication(): React.JSX.Element {
                         Sign in
                 </Button>
             </ZStack>
-        </View>
+        </SafeAreaView>
     );
 }

components/Login/helpers/server-library.tsx

@@ -6,6 +6,7 @@ import { H1, Label } from "../../Global/helpers/text";
 import Button from "../../Global/helpers/button";
 import _ from "lodash";
 import { useMusicLibraries, usePlaylistLibrary } from "@/api/queries/libraries";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function ServerLibrary(): React.JSX.Element {
 
@@ -29,7 +30,7 @@ export default function ServerLibrary(): React.JSX.Element {
     ])
 
     return (
-        <View marginHorizontal={10} flex={1} justifyContent='center'>
+        <SafeAreaView>
             <H1>Select Music Library</H1>
 
             { isPending ? (
@@ -73,6 +74,6 @@ export default function ServerLibrary(): React.JSX.Element {
             <Button onPress={() => setUser(undefined)}>
                 Switch User
             </Button>
-        </View>
+        </SafeAreaView>
     )
 }