fix: improve form input layout if description next to it is multi col

frontend/src/lib/components/form/form-input.svelte

@@ -8,6 +8,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import FormattedMessage from '../formatted-message.svelte';
+	import { cn } from '$lib/utils/style';
 
 	type WithoutChildren = {
 		children?: undefined;
@@ -48,9 +49,15 @@
 	const id = label?.toLowerCase().replace(/ /g, '-');
 </script>
 
-<Field.Field data-disabled={disabled} {...restProps}>
+<Field.Field
+	data-disabled={disabled}
+	class={cn('flex flex-col justify-between', restProps.class)}
+	{...restProps}
+>
+	<div>
 		{#if label}
-		<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label>
+			<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label
+			>
 		{/if}
 		{#if description}
 			<Field.Description>
@@ -67,6 +74,8 @@
 				{/if}
 			</Field.Description>
 		{/if}
+	</div>
+	<div>
 		{#if children}
 			{@render children()}
 		{:else if input}
@@ -88,4 +97,5 @@
 		{#if input?.error}
 			<Field.Error class="text-start">{input.error}</Field.Error>
 		{/if}
+	</div>
 </Field.Field>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte

@@ -133,7 +133,7 @@
 			/>
 		</div>
 		<h4 class="mt-10 text-lg font-semibold">{m.attribute_mapping()}</h4>
-		<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
+		<div class="mt-4 grid grid-cols-1 gap-5 md:grid-cols-2">
 			<FormInput
 				label={m.user_unique_identifier_attribute()}
 				description={m.the_value_of_this_attribute_should_never_change()}