🐛 Fixed Analytics popup only showing up once

frontend/src/routes/dashboard/+page.svelte

@@ -93,9 +93,7 @@ SPDX-License-Identifier: MPL-2.0
 <svelte:head>
 	<title>ClassQuiz - Dashboard</title>
 </svelte:head>
-{#if analytics_quiz_selected}
 <Analytics bind:quiz={analytics_quiz_selected} />
-{/if}
 <div class="min-h-screen flex flex-col">
 	{#await getData()}
 		<svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18">

frontend/src/routes/dashboard/Analytics.svelte

@@ -30,12 +30,15 @@ SPDX-License-Identifier: MPL-2.0
 	});
 </script>
 
+{#if quiz}
 	<div
-	class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50"
+		class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50 overflow-scroll"
 		on:click={on_parent_click}
 		transition:fade|local={{ duration: 100 }}
 	>
-	<div class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col w-2/3 h-5/6">
+		<div
+			class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col lg:w-2/3 w-11/12 h-5/6"
+		>
 			<h1 class="text-center text-5xl">{$t('words.analytics')}</h1>
 			<section class="flex flex-col gap-2 mt-8">
 				<h2 class="mx-auto text-2xl">{$t('words.rating')}</h2>
@@ -47,7 +50,9 @@ SPDX-License-Identifier: MPL-2.0
 						<th class="p-1 mx-auto">{$t('words.dislike', { count: 2 })}</th>
 					</tr>
 					<tr class="text-left">
-					<td class="border-r dark:border-gray-500 p-1 border-gray-300">{quiz.likes}</td>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{quiz.likes}</td
+						>
 						<td class="mx-auto p-1">{quiz.dislikes}</td>
 					</tr>
 				</table>
@@ -62,7 +67,9 @@ SPDX-License-Identifier: MPL-2.0
 						<th class="p-1 mx-auto">{$t('words.play', { count: 2 })}</th>
 					</tr>
 					<tr class="text-left">
-					<td class="border-r dark:border-gray-500 p-1 border-gray-300">{quiz.views}</td>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{quiz.views}</td
+						>
 						<td class="mx-auto p-1">{quiz.plays}</td>
 					</tr>
 				</table>
@@ -75,9 +82,11 @@ SPDX-License-Identifier: MPL-2.0
 			</section>
 			<section class="mt-auto">
 				<p class="mt-6 mx-auto max-w-[70%] text-sm dark:text-gray-200 text-center">
-				Since there's still some space left down here, I guess that I take this opportunity
+					Since there's still some space left down here, I guess that I take this
-				to thank You for using ClassQuiz! Have a great day and continue using ClassQuiz ;)
+					opportunity to thank You for using ClassQuiz! Have a great day and continue
+					using ClassQuiz ;)
 				</p>
 			</section>
 		</div>
 	</div>
+{/if}