feat: improve design trough the whole application

frontend/src/routes/settings/+layout.svelte

@@ -4,7 +4,6 @@
 	import Sidebar from '$lib/components/sidebar.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import userStore from '$lib/stores/user-store';
-	import { LucideSettings } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import type { LayoutData } from './$types';
@@ -46,7 +45,7 @@
 
 <section>
 	<div
-		class="bg-muted/40 dark:bg-background flex min-h-[calc(100vh-64px)] w-full flex-col justify-between"
+		class="bg-muted/40 dark:bg-background flex min-h-[calc(100vh-86px)] w-full flex-col justify-between"
 	>
 		<main
 			in:fade={{ duration: 200 }}
@@ -54,13 +53,6 @@
 		>
 			<div class="min-w-[200px] xl:min-w-[250px]">
 				<div in:fly={{ x: -15, duration: 200 }} class="sticky top-6">
-					<div class="mx-auto grid w-full gap-2">
-						<h1 class="mb-4 flex items-center gap-2 text-2xl font-semibold">
-							<LucideSettings class="size-5" />
-							{m.settings()}
-						</h1>
-					</div>
-
 					<Sidebar
 						{items}
 						storageKey="sidebar-open:settings"
@@ -70,7 +62,7 @@
 				</div>
 			</div>
 
-			<div class="flex w-full flex-col gap-4 overflow-hidden">
+			<div class="flex w-full flex-col gap-4 overflow-hidden pb-2">
 				<FadeWrapper>
 					<EmailVerificationStateBox />
 					{@render children()}

frontend/src/routes/settings/account/+page.svelte

@@ -141,7 +141,7 @@
 	</Card.Content>
 </Card.Root>
 
-<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
+<Item.Group class="bg-card border shadow-sm rounded-4xl p-5">
 	<Item.Root class="border-none bg-transparent p-0">
 		<Item.Media class="text-primary/80">
 			<KeyRound class="size-5" />

frontend/src/routes/settings/account/login-code-modal.svelte

@@ -64,7 +64,6 @@
 				value={loginCodeLink}
 				size={150}
 				color={mode.current === 'dark' ? '#FFFFFF' : '#000000'}
-				backgroundColor={mode.current === 'dark' ? '#000000' : '#FFFFFF'}
 			/>
 			<CopyToClipboard value={loginCodeLink!}>
 				<p class="text-sm" data-testId="login-code-link">{loginCodeLink!}</p>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-preview-modal.svelte

@@ -115,7 +115,7 @@
 				</div>
 			{/if}
 
-			<div class="flex justify-start gap-3">
+			<div class="flex flex-col sm:flex-row justify-start gap-3">
 				<Field.Field class="w-auto min-w-48">
 					<Field.Label>{m.users()}</Field.Label>
 					<SearchableSelect

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -132,7 +132,7 @@
 	</div>
 </CollapsibleCard>
 
-<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
+<Item.Group class="bg-card border p-4 shadow-sm">
 	<Item.Root class="border-none bg-transparent p-0">
 		<Item.Media class="text-primary/80">
 			<KeyRound class="size-5" />