From 5f5d8277b98363ef15a92621fca0a209345aca95 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 20 Mar 2025 22:15:36 +0100
Subject: [PATCH] wip

---
 .../contacts/AddContactModal.svelte           |  2 +-
 src/components/contacts/ContactDetail.svelte  | 26 ++++++++---------
 .../donations/DonationDetail.svelte           |  8 +++---
 src/components/donors/AddDonorModal.svelte    |  2 +-
 src/components/donors/DonorDetail.svelte      |  6 ++--
 src/components/groups/GroupDetail.svelte      |  8 +++---
 src/components/orgs/AddOrgModal.svelte        |  2 +-
 src/components/orgs/OrgDetail.svelte          | 18 ++++++------
 src/components/runners/RunnerDetail.svelte    | 28 +++++++++----------
 .../scanstations/AddScanStationModal.svelte   |  2 +-
 src/components/settings/Settings.svelte       | 24 ++++++++--------
 .../statsclients/StatsClientDetail.svelte     |  4 +--
 src/components/teams/TeamDetail.svelte        | 16 +++++------
 src/components/users/UserDetail.svelte        | 22 +++++++--------
 14 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/src/components/contacts/AddContactModal.svelte b/src/components/contacts/AddContactModal.svelte
index 23a1aa16..35ba92ad 100644
--- a/src/components/contacts/AddContactModal.svelte
+++ b/src/components/contacts/AddContactModal.svelte
@@ -349,7 +349,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
diff --git a/src/components/contacts/ContactDetail.svelte b/src/components/contacts/ContactDetail.svelte
index a9c82739..42157637 100644
--- a/src/components/contacts/ContactDetail.svelte
+++ b/src/components/contacts/ContactDetail.svelte
@@ -169,8 +169,8 @@
 			</div>
 		</div>
 		<!--  -->
-		<div class="text-sm w-full">
-			<label for="firstname" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -192,8 +192,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="middlename" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -205,8 +205,8 @@
 				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<label for="lastname" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -228,8 +228,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="email" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -251,8 +251,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+		<div class="text-sm w-full mt-2">
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -272,8 +272,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<span class="font-medium text-gray-700">{$_("groups")}</span>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("groups")}</span>
 			<select
 				bind:value={editable.groups}
 				name="team"
@@ -304,7 +304,7 @@
 				/>
 			</div>
 			<div class="ml-3 text-sm">
-				<label for="comments" class="font-medium text-gray-700"
+				<label for="comments" class="font-semibold text-gray-700"
 					>{$_("address")}</label
 				>
 			</div>
diff --git a/src/components/donations/DonationDetail.svelte b/src/components/donations/DonationDetail.svelte
index e3fbedf4..9a32fc51 100644
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -201,7 +201,7 @@
 		</div>
 		<!--  -->
 		<div>
-			<span class="font-medium text-gray-700"
+			<span class="font-semibold text-gray-700"
 				>{$_("total-donation-amount")}:</span
 			>
 			<span
@@ -210,14 +210,14 @@
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-			<span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
+			<span class="font-semibold text-gray-700">{$_("paid-amount")}:</span>
 			<span
 				>{(editable.paidAmount / 100)
 					.toFixed(2)
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-			<span class="font-medium text-gray-700">{$_("status")}:</span>
+			<span class="font-semibold text-gray-700">{$_("status")}:</span>
 			{#if editable.status == "PAID"}
 				<span
 					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
@@ -274,7 +274,7 @@
 			</div>
 		{/if}
 		<div class=" w-full">
-			<label for="lastname" class="font-medium text-gray-700">
+			<label for="lastname" class="font-semibold text-gray-700">
 				{#if original_data.responseType == "DISTANCEDONATION"}
 					{$_("amount-per-kilometer")}
 				{:else}{$_("donation-amount")}{/if}
diff --git a/src/components/donors/AddDonorModal.svelte b/src/components/donors/AddDonorModal.svelte
index 2a02d984..dd05ac99 100644
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -313,7 +313,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("receipt-needed")}</label
                     >
                   </div>
diff --git a/src/components/donors/DonorDetail.svelte b/src/components/donors/DonorDetail.svelte
index 58a14491..e5d70d31 100644
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -152,7 +152,7 @@
 		</div>
 		<!--  -->
 		<div>
-			<span class="font-medium text-gray-700"
+			<span class="font-semibold text-gray-700"
 				>{$_("total-donation-amount")}:</span
 			>
 			<span
@@ -161,14 +161,14 @@
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-			<span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
+			<span class="font-semibold text-gray-700">{$_("total-paid-amount")}:</span>
 			<span
 				>{(editable.paidDonationAmount / 100)
 					.toFixed(2)
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			<br />
-			<span class="font-medium text-gray-700">{$_("donations")}:</span>
+			<span class="font-semibold text-gray-700">{$_("donations")}:</span>
 			{#if original_data.donations.length > 0}
 				{#each original_data.donations as d}
 					{#if d.responseType === "DISTANCEDONATION"}
diff --git a/src/components/groups/GroupDetail.svelte b/src/components/groups/GroupDetail.svelte
index 63d0ad39..fc0bcf29 100644
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@@ -166,8 +166,8 @@
       </div>
     </div>
     <!--  -->
-    <div class="text-sm w-full">
-      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
+    <div class="text-sm w-full mt-2">
+      <label for="title" class="font-semibold text-gray-700">{$_("name")}</label>
       <input
         autocomplete="off"
         placeholder={$_("name")}
@@ -187,8 +187,8 @@
         </span>
       {/if}
     </div>
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
+    <div class="text-sm w-full mt-2">
+      <label for="firstname" class="font-semibold text-gray-700"
         >{$_("description")}</label
       >
       <input
diff --git a/src/components/orgs/AddOrgModal.svelte b/src/components/orgs/AddOrgModal.svelte
index 4799347d..656ba349 100644
--- a/src/components/orgs/AddOrgModal.svelte
+++ b/src/components/orgs/AddOrgModal.svelte
@@ -174,7 +174,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index 5eceee77..20fe7e30 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -232,8 +232,8 @@
 				{/if}
 			</span>
 		</div>
-		<div class="text-sm w-full">
-			<label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+		<div class="text-sm w-full mt-2">
+			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("name")}
@@ -243,8 +243,8 @@
 				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<label for="contact" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="contact" class="font-semibold text-gray-700"
 				>{$_("contact")}</label
 			>
 			<Select
@@ -276,14 +276,14 @@
 				<div class="ml-3 text-sm">
 					<label
 						for="toggle_selfservice_feature"
-						class="font-medium text-gray-700"
+						class="font-semibold text-gray-700"
 						>{$_("selfservice-registration")}</label
 					>
 				</div>
 			</div>
 			<div>
 				{#if editable.registrationEnabled}
-					<div class="text-sm w-full">
+					<div class="text-sm w-full mt-2">
 						<button on:click={copy} class="inline-flex w-full">
 							<p
 								name="token"
@@ -333,7 +333,7 @@
 						<div class="ml-3 text-sm">
 							<label
 								for="toggle_address_checkbox"
-								class="font-medium text-gray-700">{$_("address")}</label
+								class="font-semibold text-gray-700">{$_("address")}</label
 							>
 						</div>
 					</div>
@@ -426,8 +426,8 @@
 						{/if}
 					</div>
 				{/if}
-				<div class="text-sm w-full">
-					<span class="font-medium text-gray-700">{$_("distance")}</span>
+				<div class="text-sm w-full mt-2">
+					<span class="font-semibold text-gray-700">{$_("distance")}</span>
 					<br />
 					<span class="text-gray-700"
 						>{(original_object.total_distance / 1000).toFixed(2)} km</span
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 0220e855..4bfcf9a0 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -176,8 +176,8 @@
 			</span>
 		</div>
 		<!--  -->
-		<div class="text-sm w-full">
-			<label for="firstname" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -199,8 +199,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="middlename" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -212,8 +212,8 @@
 				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<label for="lastname" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -235,8 +235,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="email" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -258,8 +258,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class="text-sm w-full">
-			<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+		<div class="text-sm w-full mt-2">
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -269,8 +269,8 @@
 				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<span class="font-medium text-gray-700">{$_("group")}</span>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("group")}</span>
 			<Select
 				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
@@ -287,8 +287,8 @@
 				on:clear={() => (editable.group = null)}
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<span class="font-medium text-gray-700">{$_("distance")}</span>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("distance")}</span>
 			<br />
 			<span class="text-gray-700">{original_data.distance / 1000} km</span>
 		</div>
diff --git a/src/components/scanstations/AddScanStationModal.svelte b/src/components/scanstations/AddScanStationModal.svelte
index bf247f47..6d44aab7 100644
--- a/src/components/scanstations/AddScanStationModal.svelte
+++ b/src/components/scanstations/AddScanStationModal.svelte
@@ -165,7 +165,7 @@
                   />
                 </div>
                 <div class="col-span-6">
-                  <label for="enabled" class="font-medium text-gray-700"
+                  <label for="enabled" class="font-semibold text-gray-700"
                     >{$_("enabled_large")}</label
                   >
                   <br />
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 86c3e7c3..ab9aa41a 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -91,8 +91,8 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-                <div class="text-sm w-full">
-                  <label for="username" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="username" class="font-semibold text-gray-700"
                     >{$_("username")}</label
                   >
                   <input
@@ -104,8 +104,8 @@
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <div class="text-sm w-full">
-                  <label for="email" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="email" class="font-semibold text-gray-700"
                     >{$_("e-mail-adress")}</label
                   >
                   <input
@@ -123,8 +123,8 @@
                     >{$_("valid-email-is-required")}</span
                   >
                 {/if}
-                <div class="text-sm w-full">
-                  <label for="firstname" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="firstname" class="font-semibold text-gray-700"
                     >{$_("first-name")}</label
                   >
                   <input
@@ -136,8 +136,8 @@
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <!-- <div class="text-sm w-full">
-                  <label for="middlename" class="font-medium text-gray-700"
+                <!-- <div class="text-sm w-full mt-2">
+                  <label for="middlename" class="font-semibold text-gray-700"
                     >{$_("middle-name")}</label
                   >
                   <input
@@ -149,8 +149,8 @@
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
-                <div class="text-sm w-full">
-                  <label for="lastname" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="lastname" class="font-semibold text-gray-700"
                     >{$_("last-name")}</label
                   >
                   <input
@@ -199,7 +199,7 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -212,7 +212,7 @@
                     placeholder={$_("password")}
                   />
                 </div>
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("confirm-the-new-password")}</label
                 >
                 <div class="-mt-px relative">
diff --git a/src/components/statsclients/StatsClientDetail.svelte b/src/components/statsclients/StatsClientDetail.svelte
index 79e77279..82f22967 100644
--- a/src/components/statsclients/StatsClientDetail.svelte
+++ b/src/components/statsclients/StatsClientDetail.svelte
@@ -93,8 +93,8 @@
 			</div>
 		</div>
 		<!--  -->
-		<div class="text-sm w-full">
-			<label for="description" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="description" class="font-semibold text-gray-700"
 				>{$_("description")}</label
 			>
 			<p
diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index e1148d68..f24f97b6 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -245,8 +245,8 @@
 				{/if}
 			</span>
 		</div>
-		<div class="text-sm w-full">
-			<label for="name" class="font-medium text-gray-700">Name</label>
+		<div class="text-sm w-full mt-2">
+			<label for="name" class="font-semibold text-gray-700">Name</label>
 			<input
 				autocomplete="off"
 				placeholder="Name"
@@ -256,8 +256,8 @@
 				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<label for="contact" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="contact" class="font-semibold text-gray-700"
 				>{$_("contact")}</label
 			>
 			<Select
@@ -275,8 +275,8 @@
 				on:clear={() => (teamdata.contact = null)}
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<label for="org" class="font-medium text-gray-700"
+		<div class="text-sm w-full mt-2">
+			<label for="org" class="font-semibold text-gray-700"
 				>{$_("organization")}</label
 			>
 			<Select
@@ -294,8 +294,8 @@
 				on:clear={() => (teamdata.parentGroup = null)}
 			/>
 		</div>
-		<div class="text-sm w-full">
-			<span class="font-medium text-gray-700">{$_("distance")}</span>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("distance")}</span>
 			<br />
 			<span class="text-gray-700"
 				>{(original.total_distance / 1000).toFixed(2)} km</span
diff --git a/src/components/users/UserDetail.svelte b/src/components/users/UserDetail.svelte
index 40217003..13c484a4 100644
--- a/src/components/users/UserDetail.svelte
+++ b/src/components/users/UserDetail.svelte
@@ -215,8 +215,8 @@
         {$_("set-the-user-active-inactive")}
       </p>
     </div>
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
+    <div class="text-sm w-full mt-2">
+      <label for="firstname" class="font-semibold text-gray-700"
         >{$_("first-name")}</label
       >
       <input
@@ -228,8 +228,8 @@
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
-    <!-- <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
+    <!-- <div class="text-sm w-full mt-2">
+      <label for="middlename" class="font-semibold text-gray-700"
         >{$_("middle-name")}</label
       >
       <input
@@ -241,8 +241,8 @@
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div> -->
-    <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700"
+    <div class="text-sm w-full mt-2">
+      <label for="lastname" class="font-semibold text-gray-700"
         >{$_("last-name")}</label
       >
       <input
@@ -254,8 +254,8 @@
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
-    <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
+    <div class="text-sm w-full mt-2">
+      <label for="email" class="font-semibold text-gray-700"
         >{$_("e-mail-adress")}</label
       >
       <input
@@ -273,8 +273,8 @@
         >{$_("valid-email-is-required")}</span
       >
     {/if}
-    <div class="text-sm w-full">
-      <label for="username" class="font-medium text-gray-700"
+    <div class="text-sm w-full mt-2">
+      <label for="username" class="font-semibold text-gray-700"
         >{$_("username")}</label
       >
       <input
@@ -286,7 +286,7 @@
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
-    <div class="text-sm w-full">
+    <div class="text-sm w-full mt-2">
       <span class="font-medium">{$_("groups")}</span>
       <!-- svelte-ignore a11y-no-onchange -->
       <select