Refactor root admin dashboards and settings

components/root/contact-protection-form.tsx

@@ -22,13 +22,13 @@ export function ContactProtectionForm({
   const [rateLimitEnabled, setRateLimitEnabled] = useState(initialSettings.rateLimit.enabled);
 
   return (
-    <form id="contact-protection-form" action={action} className="space-y-6">
+    <form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
       <AppCard>
         <CardHeader>
           <CardTitle>Turnstile</CardTitle>
           <CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 md:grid-cols-2">
+        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
           <div className="space-y-4 md:col-span-2">
             <label
               htmlFor="turnstileEnabled"
@@ -81,7 +81,7 @@ export function ContactProtectionForm({
           <CardTitle>Rate Limiting</CardTitle>
           <CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 md:grid-cols-2">
+        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
           <div className="space-y-4 md:col-span-2">
             <label
               htmlFor="contactRateLimitEnabled"