From 85bc396e03b82bc63f2df775b324e8d29d06f18a Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 23 Jun 2025 18:23:04 +0300
Subject: [PATCH] docs: fix recaptcha messing up page layout (#12799)

* docs: fix recaptcha messing up page layout

* add comment
---
 .../docs-ui/src/providers/AiAssistant/index.tsx   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/www/packages/docs-ui/src/providers/AiAssistant/index.tsx b/www/packages/docs-ui/src/providers/AiAssistant/index.tsx
index f314380ee4..94959d89a8 100644
--- a/www/packages/docs-ui/src/providers/AiAssistant/index.tsx
+++ b/www/packages/docs-ui/src/providers/AiAssistant/index.tsx
@@ -13,6 +13,7 @@ import React, {
 import type { Source } from "@kapaai/react-sdk"
 import useResizeObserver from "@react-hook/resize-observer"
 import { AiAssistantSearchWindow } from "../../components"
+import { useIsBrowser } from "../BrowserProvider"
 
 export type AiAssistantChatType = "default" | "popover"
 
@@ -66,6 +67,7 @@ const AiAssistantInnerProvider = ({
     () => isGeneratingAnswer || isPreparingAnswer,
     [isGeneratingAnswer, isPreparingAnswer]
   )
+  const { isBrowser } = useIsBrowser()
 
   const scrollToBottom = () => {
     if (preventAutoScroll) {
@@ -133,6 +135,19 @@ const AiAssistantInnerProvider = ({
     })
   }, [scrollToBottom])
 
+  /**
+   * This effect is required to avoid recaptcha messing up
+   * the page layout.
+   */
+  useEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+
+    const recaptchaElm = document.querySelector(".grecaptcha-badge")
+    recaptchaElm?.parentElement?.classList.add("absolute")
+  }, [isBrowser])
+
   return (
     <AiAssistantContext.Provider
       value={{