💄 Move todo modal buttons to footer

Prevents overflow and makes them easier to reach on mobile
homostellaris · Jul 20, 2024 · fa39a39 · fa39a39
1 parent cb95b4b
commit fa39a39
Showing 1 changed file with 31 additions and 26 deletions.
diff --git 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>
 	)
 }