From 6a1069f9087ab790327b347d646f32503007ebc3 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Thu, 21 May 2026 14:33:34 +0200
Subject: [PATCH] fix(form): shrink sm inputs to text-xs, align consent
 checkbox top

- TextInput/Textarea size="sm": text-xs, tighter padding (h-9, px-2.5
  py-1.5) so placeholder/value match label scale.
- Checkbox: new size prop (sm = h-4 w-4 + text-xs leading-snug).
  Switched container to flex/items-start so multi-line labels align
  with checkbox top instead of vertically centering and pushing the
  box halfway down the paragraph.
- ContactForm: consent checkbox uses size="sm"; privacy note + error
  hint at text-[0.7rem] leading-snug to match.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../internal/ContactFormComponent.svelte         |  5 +++--
 src/lib/ui/Checkbox.svelte                       | 16 +++++++++++++---
 src/lib/ui/TextInput.svelte                      |  2 +-
 src/lib/ui/Textarea.svelte                       |  2 +-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/internal/ContactFormComponent.svelte b/src/lib/components/internal/ContactFormComponent.svelte
index d20d8d6..7a71522 100644
--- a/src/lib/components/internal/ContactFormComponent.svelte
+++ b/src/lib/components/internal/ContactFormComponent.svelte
@@ -266,14 +266,15 @@
 
     <div data-field="consent" class="pt-1">
       <Checkbox
+        size="sm"
         name="consent"
         bind:checked={consent}
         label={t(T.contact_label_consent)}
       />
       {#if showError("consent")}
-        <p class="mt-1 text-[0.75rem] text-error" role="alert">{showError("consent")}</p>
+        <p class="mt-1 text-[0.7rem] text-error" role="alert">{showError("consent")}</p>
       {/if}
-      <p class="mt-1 text-xs text-stein-500">{t(T.contact_privacy_note)}</p>
+      <p class="mt-1 text-[0.7rem] leading-snug text-stein-500">{t(T.contact_privacy_note)}</p>
     </div>
 
     {#if TURNSTILE_ENABLED}
diff --git a/src/lib/ui/Checkbox.svelte b/src/lib/ui/Checkbox.svelte
index 470fe48..cb29d4e 100644
--- a/src/lib/ui/Checkbox.svelte
+++ b/src/lib/ui/Checkbox.svelte
@@ -5,19 +5,29 @@
     label = '',
     name = '',
     value = '',
+    size = 'md' as 'sm' | 'md',
   } = $props();
+
+  const boxClass = $derived(
+    size === 'sm'
+      ? 'h-4 w-4 mt-0.5 rounded-sm border-[1.5px]'
+      : 'h-5 w-5 rounded border-[1.5px]',
+  );
+  const textClass = $derived(
+    size === 'sm' ? 'ml-2 text-xs leading-snug text-stein-700' : 'ml-2 text-base text-stein-700',
+  );
 </script>
 
-<label class="inline-flex cursor-pointer items-center {disabled ? 'cursor-not-allowed opacity-60' : ''}">
+<label class="flex cursor-pointer items-start {disabled ? 'cursor-not-allowed opacity-60' : ''}">
   <input
     type="checkbox"
     bind:checked
     {disabled}
     {name}
     {value}
-    class="h-5 w-5 rounded border-[1.5px] border-stein-400 text-wald-500 hover:border-wald-400 focus:ring-2 focus:ring-wald-100 focus:ring-offset-0 checked:border-wald-500 checked:bg-wald-500"
+    class="shrink-0 {boxClass} border-stein-400 text-wald-500 hover:border-wald-400 focus:ring-2 focus:ring-wald-100 focus:ring-offset-0 checked:border-wald-500 checked:bg-wald-500"
   />
   {#if label}
-    <span class="ml-2 text-base text-stein-700">{label}</span>
+    <span class={textClass}>{label}</span>
   {/if}
 </label>
diff --git a/src/lib/ui/TextInput.svelte b/src/lib/ui/TextInput.svelte
index 41e454b..e72d261 100644
--- a/src/lib/ui/TextInput.svelte
+++ b/src/lib/ui/TextInput.svelte
@@ -20,7 +20,7 @@
 
   const sizeClasses = $derived(
     size === 'sm'
-      ? 'h-10 rounded-sm px-3 py-2 text-sm shadow-sm'
+      ? 'h-9 rounded-sm px-2.5 py-1.5 text-xs shadow-sm'
       : 'h-12 rounded-lg px-4 py-3 text-base'
   );
 </script>
diff --git a/src/lib/ui/Textarea.svelte b/src/lib/ui/Textarea.svelte
index c2ae24f..8012525 100644
--- a/src/lib/ui/Textarea.svelte
+++ b/src/lib/ui/Textarea.svelte
@@ -20,7 +20,7 @@
 
   const sizeClasses = $derived(
     size === 'sm'
-      ? 'min-h-[80px] rounded-sm px-3 py-2 text-sm shadow-sm'
+      ? 'min-h-[80px] rounded-sm px-2.5 py-1.5 text-xs shadow-sm'
       : 'min-h-[120px] rounded-lg px-4 py-3 text-base'
   );
 </script>