Fixed layouts

apk/components/birthdate-list.tsx

@@ -42,7 +42,7 @@ export function BirthdayList() {
   const groupedData = groupBirthdaysByDate(DATA);
 
   return (
-    <View>
+    <View style={styles.container}>
       <View style={styles.titleContainer}>
         <Text style={{ fontSize: 24, fontWeight: "bold" }}>
           Upcoming Birthdays
@@ -61,6 +61,8 @@ export function BirthdayList() {
         renderItem={({ item }) => (
           <BirthdayItem name={item.name} date={item.date} />
         )}
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
         renderSectionHeader={({ section: { title } }) => (
           <View style={styles.headerContainer}>
@@ -96,13 +98,23 @@ function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   titleContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
+    gap: 12,
     paddingHorizontal: 5,
     paddingVertical: 10,
   },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingBottom: 20,
+  },
   addButton: {
     width: 40,
     height: 40,