From 15ff15b4fc2160e2c4dbc162341bf7d57510fb86 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 18 Sep 2026 18:13:11 +0100
Subject: [PATCH] web/ui: size the Turnstile widget flexibly and match the
 colour scheme

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/ui/Turnstile.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/ui/Turnstile.svelte b/web/src/lib/components/ui/Turnstile.svelte
index 98b37273d..eb0541500 100644
--- a/web/src/lib/components/ui/Turnstile.svelte
+++ b/web/src/lib/components/ui/Turnstile.svelte
@@ -9,6 +9,8 @@
 					container: HTMLElement,
 					options: {
 						sitekey: string;
+						size?: "normal" | "compact" | "flexible";
+						theme?: "light" | "dark" | "auto";
 						callback: (token: string) => void;
 						"expired-callback"?: () => void;
 						"error-callback"?: () => void;
@@ -63,9 +65,12 @@
 				const el = container;
 				const api = window.turnstile;
 				if (!el || !api) return;
+				const dark = getComputedStyle(el).colorScheme === "dark";
 				try {
 					widgetId = api.render(el, {
 						sitekey: siteKey,
+						size: "flexible",
+						theme: dark ? "dark" : "light",
 						callback: onToken,
 						"expired-callback": () => onExpire?.(),
 						"error-callback": () => onExpire?.()
@@ -90,5 +95,5 @@
 		Couldn't load the verification widget. Check your connection and try refreshing.
 	</p>
 {:else}
-	<div bind:this={container} class="min-h-16"></div>
+	<div bind:this={container} class="min-h-16 w-full"></div>
 {/if}
-- 
2.51.2