From f4393b95b44451f907faefc4872b7ee0f9ba4643 Mon Sep 17 00:00:00 2001
From: Markus Brueckner <namenlos@geekbetrieb.de>
Date: Wed, 25 Dec 2024 13:21:01 +0100
Subject: [PATCH] Improved survey edit page

---
 src/routes/(app)/survey/new/+page.svelte | 26 +++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/routes/(app)/survey/new/+page.svelte b/src/routes/(app)/survey/new/+page.svelte
index cb8012c..765ce04 100644
--- a/src/routes/(app)/survey/new/+page.svelte
+++ b/src/routes/(app)/survey/new/+page.svelte
@@ -11,9 +11,15 @@
 <Navbar title="Create a new survey" />
 <form class="grid grid-cols-2 gap-2 p-4" method="post">
 	<label for="title" class="justify-self-end">Survey Title</label>
-	<input type="text" name="title" id="title" class="justify-self-start" value={data?.title} />
+	<input
+		type="text"
+		name="title"
+		id="title"
+		class="min-w-80 justify-self-start"
+		value={data?.title}
+	/>
 	<label for="description" class="justify-self-end">Survey Description</label>
-	<textarea name="description" id="description" class="justify-self-start"
+	<textarea name="description" id="description" class="min-w-80 justify-self-start"
 		>{data?.description}</textarea
 	>
 
@@ -24,7 +30,7 @@
 			type="email"
 			name="participants"
 			id="participants"
-			class="justify-self-start"
+			class="min-w-80 justify-self-start"
 			value={data?.participants?.[idx]?.email}
 		/>
 	{/each}
@@ -36,14 +42,14 @@
 
 	<h2 class="col-span-2 text-2xl">Skills</h2>
 	{#each Array(skills) as _, idx}
-		<div class="col-span-2 ml-4 grid grid-cols-2">
-			<div class="justify-self-end">
-				<label for="skill">Skill title</label>
-				<input name="skill" id="skill" value={data?.skills?.[idx]?.title} />
+		<div class="col-span-2 ml-4 grid grid-cols-2 gap-4">
+			<div class="flex w-full flex-col justify-self-end">
+				<label for="skill" class="text-xs">Skill title</label>
+				<input name="skill" id="skill" class="w-full" value={data?.skills?.[idx]?.title} />
 			</div>
-			<div class="justify-self-start">
-				<label for="skill-description">Skill description</label>
-				<textarea name="skill-description" id="skill-description"
+			<div class="flex w-full flex-col justify-self-start">
+				<label for="skill-description" class="text-xs">Skill description</label>
+				<textarea name="skill-description" id="skill-description" class="min-h-36 w-full"
 					>{data?.skills?.[idx]?.description}</textarea
 				>
 			</div>