From b423f93c43db3b9aa5001b54cd45ff79c64bbdd1 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 27 May 2025 17:08:15 +0100
Subject: [PATCH] Lock body scroll when mobile is active

---
 src/components/RoadmapAIChat/RoadmapAIChat.tsx | 5 +++++
 src/components/TopicDetail/TopicDetail.tsx     | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/RoadmapAIChat/RoadmapAIChat.tsx b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
index 2bc1fd3bc..16bfcd4ce 100644
--- a/src/components/RoadmapAIChat/RoadmapAIChat.tsx
+++ b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
@@ -56,6 +56,7 @@ import {
 import { ChatPersona } from '../UserPersona/ChatPersona';
 import { userPersonaOptions } from '../../queries/user-persona';
 import { UpdatePersonaModal } from '../UserPersona/UpdatePersonaModal';
+import { lockBodyScroll } from '../../lib/dom';
 
 export type RoamdapAIChatHistoryType = {
   role: AllowedAIChatRole;
@@ -135,6 +136,10 @@ export function RoadmapAIChat(props: RoadmapAIChatProps) {
     queryClient,
   );
 
+  useEffect(() => {
+    lockBodyScroll(isChatMobileVisible);
+  }, [isChatMobileVisible]);
+
   const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
   const isPaidUser = userBillingDetails?.status === 'active';
 
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index b4278dcbc..22f467275 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -371,7 +371,9 @@ export function TopicDetail(props: TopicDetailProps) {
   });
 
   useEffect(() => {
-    if (isActive) topicRef?.current?.focus();
+    if (isActive) {
+      topicRef?.current?.focus();
+    }
 
     lockBodyScroll(isActive);
   }, [isActive]);