From 341f29a6fb6370e763140e45a16a185eddf2ea38 Mon Sep 17 00:00:00 2001
From: Coen Warmer <coen.warmer@gmail.com>
Date: Mon, 19 Feb 2024 20:47:17 +0100
Subject: [PATCH] [Observability AI Assistant] Mobile fixes (#177154)

Resolves https://github.com/elastic/kibana/issues/177133

## Summary

This fixes visual and interactive defects on mobile viewports.

<img width="1624" alt="Screenshot 2024-02-19 at 14 00 30"
src="https://github.com/elastic/kibana/assets/535564/edebe648-6848-42a4-a276-fc286d3b5a46">

## Checklist:
- [X] Header Link breaks weirdly on mobile
- [x] Make sure header bar menu closes properly upon opening Assistant
- [x] Fix title bar visually
- [x] Make sure prompt editor behaves
- [x] Hide conversation sidebar + new chat button
- [x] Make conversations scroll properly
- [x] More? Test thoroughly

(cherry picked from commit 9dd003d24e44b473362741a29e8129a8755c006a)
---
 .../app_root/apm_header_action_menu/index.tsx | 10 +--
 .../components/routing/app_root/index.tsx     | 18 +++++-
 .../components/action_menu/index.tsx          | 17 ++++-
 .../infra/public/pages/logs/page_content.tsx  | 36 ++++++-----
 .../infra/public/pages/metrics/index.tsx      | 50 +++++++++------
 .../components/header_menu/header_menu.tsx    | 36 ++++++-----
 .../action_menu_item/action_menu_item.tsx     | 19 +++++-
 .../public/components/chat/chat_body.tsx      | 17 ++++-
 .../public/components/chat/chat_flyout.tsx    | 27 +++++++-
 .../public/components/chat/chat_header.tsx    | 21 +++++--
 .../components/logs_explorer_top_nav_menu.tsx | 16 +++--
 x-pack/plugins/profiling/public/app.tsx       | 19 +++++-
 .../profiling_header_action_menu.tsx          |  6 --
 .../components/common/header/action_menu.tsx  | 32 +++++++---
 .../common/header/action_menu_content.tsx     |  7 +--
 .../public/legacy_uptime/app/uptime_app.tsx   |  5 +-
 .../components/common/header/action_menu.tsx  | 19 +++++-
 .../common/header/action_menu_content.tsx     |  4 --
 .../app/rum_dashboard/action_menu/index.tsx   | 62 +++++++++++--------
 19 files changed, 287 insertions(+), 134 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx b/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx
index 9be079fe43c524..50d0ce4bdf7371 100644
--- a/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx
@@ -23,12 +23,7 @@ import { InspectorHeaderLink } from './inspector_header_link';
 import { Labs } from './labs';
 
 export function ApmHeaderActionMenu() {
-  const {
-    core,
-    plugins,
-    config,
-    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
-  } = useApmPluginContext();
+  const { core, plugins, config } = useApmPluginContext();
   const { search } = window.location;
   const { application, http } = core;
   const { basePath } = http;
@@ -101,9 +96,6 @@ export function ApmHeaderActionMenu() {
         })}
       </EuiHeaderLink>
       <InspectorHeaderLink />
-      {ObservabilityAIAssistantActionMenuItem ? (
-        <ObservabilityAIAssistantActionMenuItem />
-      ) : null}
     </EuiHeaderLinks>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/routing/app_root/index.tsx b/x-pack/plugins/apm/public/components/routing/app_root/index.tsx
index 6f95463f619b63..766e9e8c9d4430 100644
--- a/x-pack/plugins/apm/public/components/routing/app_root/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/app_root/index.tsx
@@ -21,6 +21,7 @@ import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useKibanaEnvironmentContextProvider } from '../../../context/kibana_environment_context/use_kibana_environment_context';
 import { AnomalyDetectionJobsContextProvider } from '../../../context/anomaly_detection_jobs/anomaly_detection_jobs_context';
 import {
@@ -128,12 +129,23 @@ export function ApmAppRoot({
 }
 
 function MountApmHeaderActionMenu() {
-  const { setHeaderActionMenu, theme$ } =
-    useApmPluginContext().appMountParameters;
+  const {
+    appMountParameters: { setHeaderActionMenu, theme$ },
+    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+  } = useApmPluginContext();
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-      <ApmHeaderActionMenu />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ApmHeaderActionMenu />
+        </EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
diff --git a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx
index 48de28e070eaf7..f28ffb7e493d60 100644
--- a/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx
+++ b/x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx
@@ -8,8 +8,10 @@
 import React from 'react';
 import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ExpViewActionMenuContent } from './action_menu';
 import { useExploratoryView } from '../../contexts/exploratory_view_config';
+import { useKibana } from '../../hooks/use_kibana';
 
 interface Props {
   timeRange?: { from: string; to: string };
@@ -18,9 +20,22 @@ interface Props {
 export function ExpViewActionMenu(props: Props) {
   const { setHeaderActionMenu, theme$ } = useExploratoryView();
 
+  const {
+    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+  } = useKibana().services;
+
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-      <ExpViewActionMenuContent {...props} />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ExpViewActionMenuContent {...props} />
+        </EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index 39868c74797d4f..d2c8309606823b 100644
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
@@ -74,22 +74,28 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
       {setHeaderActionMenu && theme$ && (
         <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-          <EuiHeaderLinks gutterSize="xs">
-            <EuiHeaderLink color={'text'} {...settingsLinkProps}>
-              {settingsTabTitle}
-            </EuiHeaderLink>
-            <LazyAlertDropdownWrapper />
-            <EuiHeaderLink
-              href={getUrlForApp('/integrations/browse')}
-              color="primary"
-              iconType="indexOpen"
-            >
-              {ADD_DATA_LABEL}
-            </EuiHeaderLink>
+          <EuiFlexGroup responsive={false} gutterSize="s">
+            <EuiFlexItem>
+              <EuiHeaderLinks gutterSize="xs">
+                <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+                  {settingsTabTitle}
+                </EuiHeaderLink>
+                <LazyAlertDropdownWrapper />
+                <EuiHeaderLink
+                  href={getUrlForApp('/integrations/browse')}
+                  color="primary"
+                  iconType="indexOpen"
+                >
+                  {ADD_DATA_LABEL}
+                </EuiHeaderLink>
+              </EuiHeaderLinks>
+            </EuiFlexItem>
             {ObservabilityAIAssistantActionMenuItem ? (
-              <ObservabilityAIAssistantActionMenuItem />
+              <EuiFlexItem>
+                <ObservabilityAIAssistantActionMenuItem />
+              </EuiFlexItem>
             ) : null}
-          </EuiHeaderLinks>
+          </EuiFlexGroup>
         </HeaderMenuPortal>
       )}
 
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index e617edcebf9650..d38d78265ce2c1 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -10,7 +10,13 @@ import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
 
-import { EuiErrorBoundary, EuiHeaderLinks, EuiHeaderLink } from '@elastic/eui';
+import {
+  EuiErrorBoundary,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { enableInfrastructureHostsView } from '@kbn/observability-plugin/common';
@@ -83,25 +89,33 @@ export const InfrastructurePage = () => {
                   />
                   {setHeaderActionMenu && theme$ && (
                     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-                      <EuiHeaderLinks gutterSize="xs">
-                        <EuiHeaderLink color={'text'} {...settingsLinkProps}>
-                          {settingsTabTitle}
-                        </EuiHeaderLink>
-                        <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
-                        {config.featureFlags.alertsAndRulesDropdownEnabled && (
-                          <MetricsAlertDropdown />
-                        )}
-                        <EuiHeaderLink
-                          href={kibana.services?.application?.getUrlForApp('/integrations/browse')}
-                          color="primary"
-                          iconType="indexOpen"
-                        >
-                          {ADD_DATA_LABEL}
-                        </EuiHeaderLink>
+                      <EuiFlexGroup responsive={false} gutterSize="s">
+                        <EuiFlexItem>
+                          <EuiHeaderLinks gutterSize="xs">
+                            <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+                              {settingsTabTitle}
+                            </EuiHeaderLink>
+                            <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
+                            {config.featureFlags.alertsAndRulesDropdownEnabled && (
+                              <MetricsAlertDropdown />
+                            )}
+                            <EuiHeaderLink
+                              href={kibana.services?.application?.getUrlForApp(
+                                '/integrations/browse'
+                              )}
+                              color="primary"
+                              iconType="indexOpen"
+                            >
+                              {ADD_DATA_LABEL}
+                            </EuiHeaderLink>
+                          </EuiHeaderLinks>
+                        </EuiFlexItem>
                         {ObservabilityAIAssistantActionMenuItem ? (
-                          <ObservabilityAIAssistantActionMenuItem />
+                          <EuiFlexItem>
+                            <ObservabilityAIAssistantActionMenuItem />
+                          </EuiFlexItem>
                         ) : null}
-                      </EuiHeaderLinks>
+                      </EuiFlexGroup>
                     </HeaderMenuPortal>
                   )}
                   <Routes>
diff --git a/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx b/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx
index 0dfaf3eeed9973..a579eb3cd0eca2 100644
--- a/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { usePluginContext } from '../../../../hooks/use_plugin_context';
@@ -25,20 +25,26 @@ export function HeaderMenu(): React.ReactElement | null {
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme.theme$}>
-      <EuiHeaderLinks>
-        <EuiHeaderLink
-          color="primary"
-          href={http.basePath.prepend('/app/integrations/browse')}
-          iconType="indexOpen"
-        >
-          {addDataLinkText}
-        </EuiHeaderLink>
-        {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
-      </EuiHeaderLinks>
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+        <EuiFlexItem>
+          <EuiHeaderLinks>
+            <EuiHeaderLink
+              color="primary"
+              href={http.basePath.prepend('/app/integrations/browse')}
+              iconType="indexOpen"
+            >
+              {i18n.translate('xpack.observability.home.addData', {
+                defaultMessage: 'Add integrations',
+              })}
+            </EuiHeaderLink>
+          </EuiHeaderLinks>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
-
-const addDataLinkText = i18n.translate('xpack.observability.home.addData', {
-  defaultMessage: 'Add integrations',
-});
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx b/x-pack/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx
index ca8af6956ff363..e0f77f59859495 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx
@@ -6,8 +6,15 @@
  */
 import React, { useEffect, useMemo, useState } from 'react';
 import datemath from '@elastic/datemath';
-import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHeaderLink,
+  EuiLoadingSpinner,
+  useCurrentEuiBreakpoint,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/css';
 import moment from 'moment';
 import { ObservabilityAIAssistantChatServiceProvider } from '../../context/observability_ai_assistant_chat_service_provider';
 import { useAbortableAsync } from '../../hooks/use_abortable_async';
@@ -16,8 +23,14 @@ import { AssistantAvatar } from '../assistant_avatar';
 import { ChatFlyout } from '../chat/chat_flyout';
 import { useKibana } from '../../hooks/use_kibana';
 
+const buttonLabelClassName = css`
+  display: none;
+`;
+
 export function ObservabilityAIAssistantActionMenuItem() {
   const service = useObservabilityAIAssistant();
+  const breakpoint = useCurrentEuiBreakpoint();
+
   const { plugins } = useKibana().services;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -71,7 +84,7 @@ export function ObservabilityAIAssistantActionMenuItem() {
           setIsOpen(() => true);
         }}
       >
-        <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
           <EuiFlexItem grow={false}>
             {!isOpen || chatService.value ? (
               <AssistantAvatar size="xs" />
@@ -79,7 +92,7 @@ export function ObservabilityAIAssistantActionMenuItem() {
               <EuiLoadingSpinner size="m" />
             )}
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} className={breakpoint === 'xs' ? buttonLabelClassName : ''}>
             {i18n.translate('xpack.observabilityAiAssistant.actionMenuItemLabel', {
               defaultMessage: 'AI Assistant',
             })}
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
index 83eae35e59f97e..ba155c14ac2a6d 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
@@ -154,6 +154,7 @@ export function ChatBody({
   }
 
   const containerClassName = css`
+    background: white;
     min-width: 0;
     max-height: 100%;
     max-width: ${startedFrom === 'conversationView'
@@ -161,6 +162,10 @@ export function ChatBody({
       : '100%'};
   `;
 
+  const headerContainerClassName = css`
+    padding-right: ${showLinkToConversationsApp ? '32px' : '0'};
+  `;
+
   const [stickToBottom, setStickToBottom] = useState(true);
 
   const isAtBottom = (parent: HTMLElement) =>
@@ -401,9 +406,10 @@ export function ChatBody({
     return (
       <EuiFlexGroup
         direction="column"
-        gutterSize="none"
         className={containerClassName}
+        gutterSize="none"
         justifyContent="center"
+        responsive={false}
       >
         <EuiFlexItem grow={false} className={chatBodyContainerClassNameWithError}>
           <EuiCallOut
@@ -425,7 +431,12 @@ export function ChatBody({
   }
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="none" className={containerClassName}>
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="none"
+      className={containerClassName}
+      responsive={false}
+    >
       <EuiFlexItem
         grow={false}
         className={conversation.error ? chatBodyContainerClassNameWithError : undefined}
@@ -446,7 +457,7 @@ export function ChatBody({
           </EuiCallOut>
         ) : null}
       </EuiFlexItem>
-      <EuiFlexItem grow={false} css={{ paddingRight: showLinkToConversationsApp ? '24px' : '0' }}>
+      <EuiFlexItem grow={false} className={headerContainerClassName}>
         <ChatHeader
           connectors={connectors}
           conversationId={
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx
index 5a8b0ee3b37769..75379cdefed9c2 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx
@@ -16,6 +16,7 @@ import {
   EuiFlyout,
   EuiPopover,
   EuiToolTip,
+  useCurrentEuiBreakpoint,
   useEuiTheme,
 } from '@elastic/eui';
 import { ObservabilityAIAssistantMultipaneFlyoutProvider } from '../../context/observability_ai_assistant_multipane_flyout_provider';
@@ -50,6 +51,7 @@ export function ChatFlyout({
   onClose: () => void;
 }) {
   const { euiTheme } = useEuiTheme();
+  const breakpoint = useCurrentEuiBreakpoint();
 
   const currentUser = useCurrentUser();
 
@@ -66,6 +68,10 @@ export function ChatFlyout({
   const [secondSlotContainer, setSecondSlotContainer] = useState<HTMLDivElement | null>(null);
   const [isSecondSlotVisible, setIsSecondSlotVisible] = useState(false);
 
+  const flyoutClassName = css`
+    max-inline-size: 100% !important;
+  `;
+
   const sidebarClass = css`
     max-width: ${conversationsExpanded
       ? CONVERSATIONS_SIDEBAR_WIDTH
@@ -91,12 +97,17 @@ export function ChatFlyout({
 
   const containerClassName = css`
     height: 100%;
+    flex-wrap: nowrap;
   `;
 
   const chatBodyContainerClassName = css`
     min-width: 0;
   `;
 
+  const hideClassName = css`
+    display: none;
+  `;
+
   const newChatButtonClassName = css`
     position: absolute;
     bottom: 31px;
@@ -142,13 +153,18 @@ export function ChatFlyout({
       }}
     >
       <EuiFlyout
+        className={flyoutClassName}
         closeButtonProps={{
-          css: { marginRight: `${euiTheme.size.s}`, marginTop: `${euiTheme.size.s}` },
+          css: {
+            marginRight: breakpoint === 'xs' ? euiTheme.size.xs : euiTheme.size.s,
+            marginTop: breakpoint === 'xs' ? euiTheme.size.xs : euiTheme.size.s,
+          },
         }}
         size={getFlyoutWidth({
+          breakpoint,
           expanded: conversationsExpanded,
-          isSecondSlotVisible,
           flyoutWidthMode,
+          isSecondSlotVisible,
         })}
         paddingSize="m"
         onClose={() => {
@@ -160,7 +176,7 @@ export function ChatFlyout({
         }}
       >
         <EuiFlexGroup gutterSize="none" className={containerClassName}>
-          <EuiFlexItem className={sidebarClass}>
+          <EuiFlexItem className={breakpoint === 'xs' ? hideClassName : sidebarClass}>
             <EuiPopover
               anchorPosition="downLeft"
               className={expandButtonContainerClassName}
@@ -269,10 +285,12 @@ export function ChatFlyout({
 }
 
 const getFlyoutWidth = ({
+  breakpoint,
   expanded,
   isSecondSlotVisible,
   flyoutWidthMode,
 }: {
+  breakpoint?: string;
   expanded: boolean;
   isSecondSlotVisible: boolean;
   flyoutWidthMode?: FlyoutWidthMode;
@@ -280,6 +298,9 @@ const getFlyoutWidth = ({
   if (flyoutWidthMode === 'full') {
     return '100%';
   }
+  if (breakpoint === 'xs') {
+    return '90vw';
+  }
   if (!expanded && !isSecondSlotVisible) {
     return '40vw';
   }
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx
index 0dc37c7829482d..8a9b1458adf45c 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx
@@ -15,6 +15,7 @@ import {
   EuiPopover,
   EuiToolTip,
   useEuiTheme,
+  useCurrentEuiBreakpoint,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/css';
@@ -34,6 +35,11 @@ const chatHeaderClassName = css`
   padding-bottom: 12px;
 `;
 
+const chatHeaderMobileClassName = css`
+  padding-top: 8px;
+  padding-bottom: 8px;
+`;
+
 export function ChatHeader({
   connectors,
   conversationId,
@@ -58,6 +64,7 @@ export function ChatHeader({
   onToggleFlyoutWidthMode?: (newFlyoutWidthMode: FlyoutWidthMode) => void;
 }) {
   const theme = useEuiTheme();
+  const breakpoint = useCurrentEuiBreakpoint();
 
   const router = useObservabilityAIAssistantRouter();
 
@@ -87,20 +94,24 @@ export function ChatHeader({
   return (
     <EuiPanel
       borderRadius="none"
+      className={breakpoint === 'xs' ? chatHeaderMobileClassName : chatHeaderClassName}
       hasBorder={false}
       hasShadow={false}
-      paddingSize="m"
-      className={chatHeaderClassName}
+      paddingSize={breakpoint === 'xs' ? 's' : 'm'}
     >
       <EuiFlexGroup gutterSize="m" responsive={false} alignItems="center">
         <EuiFlexItem grow={false}>
-          {loading ? <EuiLoadingSpinner size="l" /> : <AssistantAvatar size="s" />}
+          {loading ? (
+            <EuiLoadingSpinner size={breakpoint === 'xs' ? 'm' : 'l'} />
+          ) : (
+            <AssistantAvatar size={breakpoint === 'xs' ? 'xs' : 's'} />
+          )}
         </EuiFlexItem>
 
         <EuiFlexItem grow className={minWidthClassName}>
           <EuiInlineEditTitle
             heading="h2"
-            size="s"
+            size={breakpoint === 'xs' ? 'xs' : 's'}
             value={newTitle}
             className={css`
               color: ${!!title ? theme.euiTheme.colors.text : theme.euiTheme.colors.subduedText};
@@ -130,7 +141,7 @@ export function ChatHeader({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup gutterSize="s">
+          <EuiFlexGroup gutterSize="s" responsive={false}>
             {flyoutWidthMode && onToggleFlyoutWidthMode ? (
               <>
                 <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
index 0f64f586ab3fdb..74c6347477ec6a 100644
--- a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
+++ b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
@@ -70,15 +70,17 @@ const ServerlessTopNav = () => {
             <VerticalRule />
             <AlertsPopover />
             <VerticalRule />
-            {ObservabilityAIAssistantActionMenuItem ? (
-              <ObservabilityAIAssistantActionMenuItem />
-            ) : null}
           </EuiHeaderLinks>
         </EuiHeaderSectionItem>
         <EuiHeaderSectionItem>
           <ConnectedOnboardingLink />
         </EuiHeaderSectionItem>
       </EuiHeaderSection>
+      {ObservabilityAIAssistantActionMenuItem ? (
+        <EuiHeaderSection>
+          <ObservabilityAIAssistantActionMenuItem />
+        </EuiHeaderSection>
+      ) : null}
     </EuiHeader>
   );
 };
@@ -148,12 +150,14 @@ const StatefulTopNav = () => {
             <VerticalRule />
             <AlertsPopover />
             <VerticalRule />
-            {ObservabilityAIAssistantActionMenuItem ? (
-              <ObservabilityAIAssistantActionMenuItem />
-            ) : null}
             <ConnectedOnboardingLink />
           </EuiHeaderLinks>
         </EuiHeaderSectionItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiHeaderSectionItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiHeaderSectionItem>
+        ) : null}
       </EuiHeaderSection>
     </HeaderMenuPortal>
   );
diff --git a/x-pack/plugins/profiling/public/app.tsx b/x-pack/plugins/profiling/public/app.tsx
index e91c2eef4ec72d..8600d4db602f27 100644
--- a/x-pack/plugins/profiling/public/app.tsx
+++ b/x-pack/plugins/profiling/public/app.tsx
@@ -8,6 +8,7 @@
 import { AppMountParameters, CoreSetup, CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 import React, { useMemo } from 'react';
@@ -25,6 +26,7 @@ import { ProfilingHeaderActionMenu } from './components/profiling_header_action_
 import { RouterErrorBoundary } from './routing/router_error_boundary';
 import { LicenseProvider } from './components/contexts/license/license_context';
 import { ProfilingSetupStatusContextProvider } from './components/contexts/profiling_setup_status/profiling_setup_status_context';
+import { useProfilingDependencies } from './components/contexts/profiling_dependencies/use_profiling_dependencies';
 
 interface Props {
   profilingFetchServices: Services;
@@ -46,9 +48,24 @@ function MountProfilingActionMenu({
   theme$: AppMountParameters['theme$'];
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
 }) {
+  const {
+    start: {
+      observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+    },
+  } = useProfilingDependencies();
+
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-      <ProfilingHeaderActionMenu />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ProfilingHeaderActionMenu />
+        </EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
diff --git a/x-pack/plugins/profiling/public/components/profiling_header_action_menu.tsx b/x-pack/plugins/profiling/public/components/profiling_header_action_menu.tsx
index 5c0189a35c5f86..dc8d7123c9a583 100644
--- a/x-pack/plugins/profiling/public/components/profiling_header_action_menu.tsx
+++ b/x-pack/plugins/profiling/public/components/profiling_header_action_menu.tsx
@@ -19,16 +19,11 @@ import { useHistory } from 'react-router-dom';
 import url from 'url';
 import { useProfilingRouter } from '../hooks/use_profiling_router';
 import { AddDataTabs } from '../views/add_data_view';
-import { useProfilingDependencies } from './contexts/profiling_dependencies/use_profiling_dependencies';
 
 export function ProfilingHeaderActionMenu() {
   const router = useProfilingRouter();
   const history = useHistory();
 
-  const {
-    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
-  } = useProfilingDependencies().start;
-
   return (
     <EuiHeaderLinks gutterSize="xs">
       <EuiToolTip
@@ -85,7 +80,6 @@ export function ProfilingHeaderActionMenu() {
           defaultMessage: 'Settings',
         })}
       </EuiHeaderLink>
-      {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
     </EuiHeaderLinks>
   );
 }
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu.tsx
index 4f166211057ea7..7054ff53fd4e8d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu.tsx
@@ -8,13 +8,29 @@
 import React from 'react';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { AppMountParameters } from '@kbn/core/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { ClientPluginsStart } from '../../../../../plugin';
 import { ActionMenuContent } from './action_menu_content';
 
-export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => (
-  <HeaderMenuPortal
-    setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
-    theme$={appMountParameters.theme$}
-  >
-    <ActionMenuContent />
-  </HeaderMenuPortal>
-);
+export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => {
+  const {
+    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+  } = useKibana<ClientPluginsStart>().services;
+
+  return (
+    <HeaderMenuPortal
+      setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+      theme$={appMountParameters.theme$}
+    >
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ActionMenuContent />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
+      </EuiFlexItem>
+    </HeaderMenuPortal>
+  );
+};
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx
index c9a0118815eca1..090eeea83cc9cd 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/header/action_menu_content.tsx
@@ -13,7 +13,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 import { createExploratoryViewUrl } from '@kbn/exploratory-view-plugin/public';
 import { LastRefreshed } from '../components/last_refreshed';
 import { AutoRefreshButton } from '../components/auto_refresh_button';
-import { useSyntheticsSettingsContext, useSyntheticsStartPlugins } from '../../../contexts';
+import { useSyntheticsSettingsContext } from '../../../contexts';
 import { useGetUrlParams } from '../../../hooks';
 import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../../common/constants';
 import { stringifyUrlParams } from '../../../utils/url_params';
@@ -32,8 +32,6 @@ const ANALYZE_MESSAGE = i18n.translate('xpack.synthetics.analyzeDataButtonLabel.
 export function ActionMenuContent(): React.ReactElement {
   const { basePath } = useSyntheticsSettingsContext();
 
-  const { observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem } = {} } =
-    useSyntheticsStartPlugins();
   const params = useGetUrlParams();
   const { dateRangeStart, dateRangeEnd } = params;
   const history = useHistory();
@@ -106,9 +104,6 @@ export function ActionMenuContent(): React.ReactElement {
         </EuiHeaderLink>
       </EuiToolTip>
       <InspectorHeaderLink />
-      {ObservabilityAIAssistantActionMenuItem && ObservabilityAIAssistantActionMenuItem ? (
-        <ObservabilityAIAssistantActionMenuItem />
-      ) : null}
     </EuiHeaderLinks>
   );
 }
diff --git a/x-pack/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx b/x-pack/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx
index c82ac50a72594d..41a18cebdb1ccd 100644
--- a/x-pack/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx
@@ -143,7 +143,10 @@ const Application = (props: UptimeAppProps) => {
                                 <InspectorContextProvider>
                                   <UptimeAlertsFlyoutWrapper />
                                   <PageRouter />
-                                  <ActionMenu appMountParameters={appMountParameters} />
+                                  <ActionMenu
+                                    appMountParameters={appMountParameters}
+                                    observabilityAIAssistant={startPlugins.observabilityAIAssistant}
+                                  />
                                 </InspectorContextProvider>
                               </RedirectAppLinks>
                             </div>
diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu.tsx
index 4f166211057ea7..937cacaab165d7 100644
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu.tsx
@@ -8,13 +8,28 @@
 import React from 'react';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { AppMountParameters } from '@kbn/core/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { ObservabilityAIAssistantPluginStart } from '@kbn/observability-ai-assistant-plugin/public';
 import { ActionMenuContent } from './action_menu_content';
 
-export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => (
+export const ActionMenu = ({
+  appMountParameters,
+  observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+}: {
+  appMountParameters: AppMountParameters;
+  observabilityAIAssistant: ObservabilityAIAssistantPluginStart;
+}) => (
   <HeaderMenuPortal
     setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
     theme$={appMountParameters.theme$}
   >
-    <ActionMenuContent />
+    <EuiFlexGroup responsive={false} gutterSize="s">
+      <EuiFlexItem>
+        <ActionMenuContent />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </HeaderMenuPortal>
 );
diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu_content.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu_content.tsx
index 58756b4a5669a4..11c59ea7ccbdd0 100644
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu_content.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/header/action_menu_content.tsx
@@ -22,7 +22,6 @@ import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../common/constants';
 import { InspectorHeaderLink } from './inspector_header_link';
 import { monitorStatusSelector } from '../../../state/selectors';
 import { ManageMonitorsBtn } from './manage_monitors_btn';
-import { useUptimeStartPlugins } from '../../../contexts/uptime_startup_plugins_context';
 
 const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
   defaultMessage: 'Add data',
@@ -41,8 +40,6 @@ export function ActionMenuContent(): React.ReactElement {
   const kibana = useKibana();
 
   const { basePath } = useUptimeSettingsContext();
-  const { observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem } = {} } =
-    useUptimeStartPlugins();
   const params = useGetUrlParams();
   const { dateRangeStart, dateRangeEnd } = params;
   const history = useHistory();
@@ -121,7 +118,6 @@ export function ActionMenuContent(): React.ReactElement {
         {ADD_DATA_LABEL}
       </EuiHeaderLink>
       <InspectorHeaderLink />
-      {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
     </EuiHeaderLinks>
   );
 }
diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/action_menu/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/action_menu/index.tsx
index da0cc4f8cfc7e5..83350afcf8ac28 100644
--- a/x-pack/plugins/ux/public/components/app/rum_dashboard/action_menu/index.tsx
+++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/action_menu/index.tsx
@@ -6,7 +6,13 @@
  */
 
 import React from 'react';
-import { EuiHeaderLinks, EuiHeaderLink, EuiToolTip } from '@elastic/eui';
+import {
+  EuiHeaderLinks,
+  EuiHeaderLink,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import {
@@ -70,32 +76,38 @@ export function UXActionMenu({
       setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
       theme$={appMountParameters.theme$}
     >
-      <EuiHeaderLinks gutterSize="xs">
-        <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
-          <EuiHeaderLink
-            data-test-subj="uxAnalyzeBtn"
-            color="text"
-            href={uxExploratoryViewLink}
-            iconType="visBarVerticalStacked"
-          >
-            {ANALYZE_DATA}
-          </EuiHeaderLink>
-        </EuiToolTip>
-        <EuiHeaderLink
-          color="primary"
-          iconType="indexOpen"
-          iconSide="left"
-          href={application.getUrlForApp('/apm/tutorial')}
-        >
-          {i18n.translate('xpack.ux.addDataButtonLabel', {
-            defaultMessage: 'Add data',
-          })}
-        </EuiHeaderLink>
-        <UxInspectorHeaderLink isDev={isDev} />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <EuiHeaderLinks gutterSize="xs">
+            <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
+              <EuiHeaderLink
+                data-test-subj="uxAnalyzeBtn"
+                color="text"
+                href={uxExploratoryViewLink}
+                iconType="visBarVerticalStacked"
+              >
+                {ANALYZE_DATA}
+              </EuiHeaderLink>
+            </EuiToolTip>
+            <EuiHeaderLink
+              color="primary"
+              iconType="indexOpen"
+              iconSide="left"
+              href={application.getUrlForApp('/apm/tutorial')}
+            >
+              {i18n.translate('xpack.ux.addDataButtonLabel', {
+                defaultMessage: 'Add data',
+              })}
+            </EuiHeaderLink>
+            <UxInspectorHeaderLink isDev={isDev} />
+          </EuiHeaderLinks>
+        </EuiFlexItem>
         {ObservabilityAIAssistantActionMenuItem ? (
-          <ObservabilityAIAssistantActionMenuItem />
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
         ) : null}
-      </EuiHeaderLinks>
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }