Fix the EIS callout being cut off for large font sizes

viduni94 · viduni94 · commit ca1f0ee3157e · 2025-07-07T08:45:09.000-04:00
diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx
@@ -172,6 +172,7 @@ export function ChatFlyout({
           'xpack.aiAssistant.chatFlyout.euiFlyoutResizable.aiAssistantLabel',
           { defaultMessage: 'AI Assistant Chat Flyout' }
         )}
+        data-test-subj="aiAssistantChatFlyout"
         className={flyoutClassName}
         closeButtonProps={{
           css: {
diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.tsx
@@ -120,6 +120,28 @@ export function ChatHeader({
     false
   );
 
+  const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
+
+  useEffect(() => {
+    // Check if the AI Assistant flyout is open
+    const checkFlyoutContext = () => {
+      const aiAssistantFlyout = document.querySelector('[data-test-subj="aiAssistantChatFlyout"]');
+      if (aiAssistantFlyout) {
+        setIsFlyoutOpen(true);
+      } else {
+        setIsFlyoutOpen(false);
+      }
+    };
+
+    checkFlyoutContext();
+
+    // Set up a mutation observer to detect when flyouts are added/removed
+    const observer = new MutationObserver(checkFlyoutContext);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <EuiPanel
       borderRadius="none"
@@ -281,11 +303,10 @@ export function ChatHeader({
               ) : null}
 
               <EuiFlexItem grow={false}>
-                {!!elasticManagedLlm && !tourCalloutDismissed ? (
-                  <ElasticLlmTourCallout
-                    zIndex={isConversationApp ? 999 : undefined}
-                    dismissTour={() => setTourCalloutDismissed(true)}
-                  >
+                {!!elasticManagedLlm &&
+                !tourCalloutDismissed &&
+                !(isConversationApp && isFlyoutOpen) ? (
+                  <ElasticLlmTourCallout dismissTour={() => setTourCalloutDismissed(true)}>
                     <ChatActionsMenu connectors={connectors} disabled={licenseInvalid} />
                   </ElasticLlmTourCallout>
                 ) : (
