Margin at the bottom of the widget.

[nillpoe]

What's the cause of the problem?

[nillpoe]

I solved this way:

"use client";

import Turnstile, {TurnstileProps} from "react-turnstile";

export default function TurnstileWidget(props: Omit<TurnstileProps, "sitekey">) {
    return (
        <div className="!h-[63px] *:w-[calc(100%+2px)] rounded-md overflow-hidden border border-input *:-mt-[1.1px] *:-ml-[1px]">
            <Turnstile
                {...props}
                sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
                size="flexible"
            />
        </div>
    );
}

[marsidev]

Hello, I'm not sure what's causing the unexpected margin, but it certainly isn't coming from this library. It also happens with the Vanilla widget.

Feel free to add a ticket here: https://community.cloudflare.com/c/website-application-performance/turnstile

Thanks for sharing your solution.