Add ScrollView and Portal.Host to Subjects. Add margin to last card.

Move FAB inside Portal

components/Subjects.js

@@ -4,10 +4,12 @@ import {
 	Button,
 	Card,
 	FAB,
+	Portal,
 	Text
 } from "react-native-paper";
 
 import {
+	ScrollView,
 	StyleSheet
 } from "react-native";
 
@@ -20,13 +22,23 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
 		setShowDialog(false);
 	}
 	return (
-		<>
+		<Portal.Host><ScrollView>
 			{subjects.length === 0 ?
-				<Text style={style.text}>No Subjects added. Press + to add a subject.</Text>
+				<Text style={style.text}>
+					No Subjects added. Press + to add a subject.
+				</Text>
 				: null
 			}
-			{subjects.map(subject => (
-				<Card key={subject.id} style={style.card}>
+			{subjects.map((subject, idx) => (
+				<Card
+					key={subject.id}
+					style={
+						[
+							style.card,
+							{marginBottom: idx === subjects.length - 1 ? 12 : 0 }
+						]
+					}
+				>
 					<Card.Title title={subject.name} />
 					<Card.Actions>
 						<Button onPress={() => removeSubject(subject.id)}>
@@ -43,6 +55,7 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
 				label="Subject Name"
 				onOK={onInput}
 			/>
+			<Portal>
 				<FAB
 					large
 					icon="plus"
@@ -54,7 +67,8 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
 						bottom: 0,
 					}}
 				/>
-		</>
+			</Portal>
+		</ScrollView></Portal.Host>
 	);
 }