From ebf1ed8f63d641f03d58703588fdf5393c8d7eef Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Fri, 20 Mar 2026 15:14:19 -0500 Subject: [PATCH] [AI Chat]: Fix Suggested Questions Overlap (#34869) Fixes a bug where Suggested Questions was overlapping the header when creating a new conversation. --- components/ai_chat/resources/page/chat_ui.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/components/ai_chat/resources/page/chat_ui.tsx b/components/ai_chat/resources/page/chat_ui.tsx index 4c02717083e..455d4b43614 100644 --- a/components/ai_chat/resources/page/chat_ui.tsx +++ b/components/ai_chat/resources/page/chat_ui.tsx @@ -131,6 +131,10 @@ function ConversationEntries(props: ConversationEntriesProps) { setHasLoaded(false) props.onIsContentReady(false) hasNotifiedContentReady.current = false + document.body.style.setProperty( + '--iframe-additional-margin-for-menus', + '0px', + ) if (iframeRef.current) { iframeRef.current.style.height = '0px' } @@ -139,6 +143,8 @@ function ConversationEntries(props: ConversationEntriesProps) { const conversationHasEntries = !!conversationApi.useGetConversationHistory().getConversationHistoryData .length + const conversationHasEntriesRef = React.useRef(conversationHasEntries) + conversationHasEntriesRef.current = conversationHasEntries // Mark that iframe has loaded if there're no conversation entries, // since we won't get ChildHeightChanged notification in that case. @@ -171,7 +177,12 @@ function ConversationEntries(props: ConversationEntriesProps) { // button menu's get cut off when the conversation is short since // they cant be rendered outside of the iframe. // See https://github.com/brave/brave-browser/issues/46042 - const additionalHeight = Math.max(0, 600 - height) + // For an empty conversation, the iframe is very short; the companion + // negative margin on .aichatIframeContainer would collapse layout and + // pull suggested questions over the header — skip the hack until + // there are entries. + const hasEntries = conversationHasEntriesRef.current + const additionalHeight = hasEntries ? Math.max(0, 600 - height) : 0 document.body.style.setProperty( '--iframe-additional-margin-for-menus', additionalHeight + 'px',