fancy layout, cleanup

src/routes/+page.svelte

@@ -36,7 +36,9 @@
 		await event.publish();
 		console.log("event id", event.id)
 		$questionId = event.id;
-		$qrCodeUrl = await QRCode.toDataURL(`${window.location.origin}/q/${$questionId}`);
+		$qrCodeUrl = await QRCode.toDataURL(`${window.location.origin}/q/${$questionId}`, {
+			width: 800,
+		});
 	}
 
 	function startTimer() {
@@ -55,6 +57,8 @@
 		if ($ndkReady) {
 			if ($ndk.activeUser) {
 				console.log('User:', $user);
+			} else {
+				login();
 			}
 		}
 	});
@@ -128,11 +132,6 @@
 		-webkit-appearance: none;
 		margin: 0;
 	}
-	:root {
-		display: grid;
-		place-items: center; /* shorthand for both horizontal and vertical centering */
-		height: 100%;
-	}
 	.qr-share img {
 		width: 100%;
 		border: 3px solid #eee;
@@ -145,6 +144,7 @@
 			display: flex;
 			margin: 0 auto;
 	    max-width: 250px;
+			border-radius: 50%;
 	}
 	.main-layout {
 		margin: auto;

src/routes/q/[id]/+page.svelte

@@ -18,10 +18,10 @@
 
 	let comment = '';
 	let comments = writable([]);
-	let question = writable('');
 
 	$effect(() => {
 		if ($ndkReady) {
+			console.log('ndk ready');
 			const sub = $ndk.subscribe({ kinds: [2222], '#E': [data.id] });
 			sub.on('event', (event) => {
 				$comments = [...$comments, event];
@@ -31,16 +31,16 @@
 	});
 </script>
 
-<div class="mx-auto flex flex-col items-center justify-center w-3/4">
+<div class="main-layout mx-auto flex flex-col items-center justify-center w-3/4">
 	{#await $ndk.fetchEvent(data.id) then question}
 		{#if question}
-			<div class="mb-4 w-full rounded border p-2">
-				<h2>Question: {question.content}</h2>
+			<div class="question mb-4 w-full rounded border p-4 text-xl">
+				<h2>Question:<br />{question.content}</h2>
 			</div>
 
 			<div class="w-full flex flex-col items-center justify-center gap-2 mb-2">
 				<h1 class="text-xl">Ideensammlung</h1>
-				<textarea class="w-full border" bind:value={comment} placeholder="Mein Kommentar"></textarea>
+				<textarea class="w-full border p-2" bind:value={comment} placeholder="Mein Kommentar"></textarea>
 				<button class="btn btn-success" onclick={() => submitComment()}>Absenden</button>
 			</div>
 		{:else}
@@ -56,3 +56,20 @@
 		{/each}
 	</div>
 </div>
+
+<style>
+    .main-layout {
+        margin: auto;
+        width: 100vw;
+        max-width: 600px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        gap: 5%;
+        height: 100%;
+    }
+		.question {
+				border-radius: 10px;
+				border-color: #ccc;
+		}
+</style>