From ae4160abf86b235bafd2147f087da785136379c9 Mon Sep 17 00:00:00 2001
From: awwpotato <awwpotato@voidq.com>
Date: Thu, 14 Nov 2024 18:49:34 -0800
Subject: [PATCH] fix: make successfail work on all screen sizes

---
 src/lib/components/SuccessFail.svelte | 30 ++++++++++++++-------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/SuccessFail.svelte b/src/lib/components/SuccessFail.svelte
index 8cb4f6a..a2ffa60 100644
--- a/src/lib/components/SuccessFail.svelte
+++ b/src/lib/components/SuccessFail.svelte
@@ -3,19 +3,21 @@
 		$props();
 </script>
 
-<div
-	class="fixed inset-0 grid grid-cols-2 grid-rows-4 gap-4 bg-eerie_black p-4 text-xl font-extrabold text-white"
->
-	<button
-		class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
-		onclick={() => complete(true)}>Success</button
-	>
-	<button
-		class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
-		onclick={() => complete(false)}>Fail</button
-	>
-	<button
-		class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
-		onclick={() => cancel()}>Cancel</button
+<div class="fixed inset-0 flex items-center justify-center bg-eerie_black">
+	<div
+		class="grid h-dvh max-h-[48rem] w-dvw max-w-96 grid-cols-2 grid-rows-4 gap-4 p-4 text-xl font-extrabold text-white"
 	>
+		<button
+			class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
+			onclick={() => complete(true)}>Success</button
+		>
+		<button
+			class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
+			onclick={() => complete(false)}>Fail</button
+		>
+		<button
+			class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
+			onclick={() => cancel()}>Cancel</button
+		>
+	</div>
 </div>