From fa39a3965a625f4d7ff2466b3dceb00ad5cdbeb9 Mon Sep 17 00:00:00 2001
From: Daniel Metcalfe <mrdanielmetcalfe@gmail.com>
Date: Sat, 20 Jul 2024 12:22:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Move=20todo=20modal=20buttons=20?=
 =?UTF-8?q?to=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevents overflow and makes them easier to reach on mobile
---
 components/todos/TodoModal.tsx | 57 ++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/components/todos/TodoModal.tsx b/components/todos/TodoModal.tsx
index 6b6750b..6d6f767 100644
--- a/components/todos/TodoModal.tsx
+++ b/components/todos/TodoModal.tsx
@@ -2,6 +2,7 @@ import {
 	IonButton,
 	IonButtons,
 	IonContent,
+	IonFooter,
 	IonHeader,
 	IonIcon,
 	IonInput,
@@ -60,32 +61,6 @@ export default function TodoModal({
 			<IonHeader>
 				<IonToolbar>
 					<IonTitle slot="start">{title}</IonTitle>
-					<IonButtons slot="secondary">
-						<IonButton
-							role="cancel"
-							onClick={() => dismiss(null, 'cancel')}
-						>
-							Cancel
-						</IonButton>
-					</IonButtons>
-					<IonButtons slot="primary">
-						<IonButton
-							onClick={() => {
-								dismiss(
-									{
-										...todo,
-										title: input.current?.value,
-										note: noteInput.current?.value,
-									},
-									'confirm',
-								)
-							}}
-							strong={true}
-						>
-							Confirm
-						</IonButton>
-					</IonButtons>
-					{toolbarSlot}
 				</IonToolbar>
 			</IonHeader>
 			<IonContent className="space-y-4 ion-padding">
@@ -125,6 +100,36 @@ export default function TodoModal({
 					/>
 				)}
 			</IonContent>
+			<IonFooter>
+				<IonToolbar>
+					<IonButtons slot="secondary">
+						<IonButton
+							role="cancel"
+							onClick={() => dismiss(null, 'cancel')}
+						>
+							Cancel
+						</IonButton>
+					</IonButtons>
+					<IonButtons slot="primary">
+						<IonButton
+							onClick={() => {
+								dismiss(
+									{
+										...todo,
+										title: input.current?.value,
+										note: noteInput.current?.value,
+									},
+									'confirm',
+								)
+							}}
+							strong={true}
+						>
+							Confirm
+						</IonButton>
+					</IonButtons>
+					{toolbarSlot}
+				</IonToolbar>
+			</IonFooter>
 		</IonPage>
 	)
 }