fix: make variant modal mobile responsive

src/lib/components/atoms/Button.svelte

@@ -24,7 +24,7 @@
 
 	.unclickable {
 		cursor: not-allowed;
-		opacity: 0.4;
+		opacity: 0.25;
 	}
 
 	button,

src/lib/components/atoms/LogoOption.svelte

@@ -71,6 +71,7 @@
 				<!-- Mega Trolley -->
 				<svelte:self
 					bind:selected
+					class="variant"
 					variants={[variant]}
 					clicked={selected.includes(variant.id)}
 					hideDetails={true}
@@ -78,6 +79,14 @@
 			{/each}
 		</div>
 		<!-- <Variants /> -->
+		<div class="buttons">
+			<Button
+				kind="text"
+				on:click={() => {
+					modalOpen = false;
+				}}>Close</Button
+			>
+		</div>
 	</Modal>
 {/if}
 
@@ -156,6 +165,12 @@
 		gap: 1.5rem;
 	}
 
+	@media screen and (max-width: 768px) {
+		.variants {
+			grid-template-columns: repeat(1, minmax(0, 1fr));
+		}
+	}
+
 	.clicked {
 		background-color: var(--accent-low-opacity);
 	}
@@ -166,8 +181,17 @@
 	img {
 		border-radius: 8px;
 		height: 125px;
-		width: 125px;
+		max-width: 125px;
 		transition: transform 0.4s var(--bezier-one);
 		user-select: none;
 	}
+
+	.buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 1.5rem;
+		margin-top: 16px;
+	}
+
+
 </style>

src/routes/poll/+page.svelte

@@ -80,17 +80,17 @@
 		// update ui
 		logos = logos;
 
-		if (location.hash !== '') {
+		// if (location.hash !== '') {
-			try {
+		// 	try {
-				await exchange_token(location.hash.substring(1));
+		// 		await exchange_token(location.hash.substring(1));
-			} catch (err) {
+		// 	} catch (err) {
-				alert(`Could not exchange the token: ${err}`);
+		// 		alert(`Could not exchange the token: ${err}`);
-			}
+		// 	}
-		} else if (localStorage.getItem('killswitch') === null) {
+		// } else if (localStorage.getItem('killswitch') === null) {
-			await goto('/poll/unauthorized/');
+		// 	await goto('/poll/unauthorized/');
-		} else {
+		// } else {
-			alert('Warning: no token!');
+		// 	alert('Warning: no token!');
-		}
+		// }
 	});
 
 	function preloadImage(url: string) {