[UII] Make Fleet & Integrations layouts full width (#186056)

## Summary

Resolves https://github.com/elastic/ingest-dev/issues/2602.

This PR makes global changes to Fleet and Integrations:

1. Layout expands to 100% of available screen width when screen size is
< 1600px wide
2. Layout expands to 80% when screen size is >= 1600px
3. Sets all flyouts to `medium` size with a max width of 800px no matter
the screen size

Exceptions:
- Create/edit integration policy page is restricted to 1200px when
screen size is >= 1600px
- Agent policy settings page is restricted to 1200px no matter the
screen size

### Screenshots

<details>
<summary>On 1920px screen</summary>


![image](96198a5c-b247-4339-940b-134693fc7643)


![image](425e531f-6b02-4895-8478-ab42af6bd696)


![image](325b6dcf-f3e6-44a0-9baf-bfa9f4722b9b)


![image](cbab07a4-5bfe-480c-b8f9-0685615cf471)


![image](7c0852e6-ccd1-4b37-bb67-9e3d7a84941e)


![image](f16aa397-d695-4f86-b9e1-8fa1440ef5aa)
</details>

<details>
<summary>On smaller screen</summary>


![image](6d077af4-c792-4058-b957-9dbe425ba3dd)


![image](6ed144be-b410-4b26-ab6e-4aeb20bed038)


![image](673965b0-f46f-426b-ae95-6eb258f76ec4)


![image](2e0f5f23-29b0-4a90-a855-5e1767d93f7c)


![image](73c0a806-d0b1-40d3-aa99-a44e4fe9b4c0)


![image](fc3e15c8-4992-4808-8e15-4cf91acf5acc)
</details>

### Testing
Fire up the PR and click around everything :)

x-pack/plugins/fleet/dev_docs/react_query.md

@@ -155,21 +155,18 @@ There's a bit of setup involved to actually get `react-query` up and running. Fi
 
 ```tsx
 //...
-
+<QueryClientProvider client={queryClient}>
-<EuiThemeProvider darkMode={isDarkMode}>
+  <ReactQueryDevtools initialIsOpen={true} />
-  <QueryClientProvider client={queryClient}>
+  <UIExtensionsContext.Provider value={extensions}>
-    <ReactQueryDevtools initialIsOpen={true} />
+    <FleetStatusProvider>
-    <UIExtensionsContext.Provider value={extensions}>
+      <Router history={history}>
-      <FleetStatusProvider>
+        <PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
-        <Router history={history}>
+          <FlyoutContextProvider>{children}</FlyoutContextProvider>
-          <PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
+        </PackageInstallProvider>
-            <FlyoutContextProvider>{children}</FlyoutContextProvider>
+      </Router>
-          </PackageInstallProvider>
+    </FleetStatusProvider>
-        </Router>
+  </UIExtensionsContext.Provider>
-      </FleetStatusProvider>
+</QueryClientProvider>
-    </UIExtensionsContext.Provider>
-  </QueryClientProvider>
-</EuiThemeProvider>
 ```
 
 We also set up `react-query`'s [dev tools](https://tanstack.com/query/v4/docs/react/devtools), which provide a useful developer console for debugging query and mutation state across the whole application.

x-pack/plugins/fleet/public/applications/fleet/app.tsx

@@ -18,9 +18,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { css } from '@emotion/css';
-
 import type { TopNavMenuData } from '@kbn/navigation-plugin/public';
-
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
@@ -186,11 +184,20 @@ export const FleetAppContext: React.FC<{
     routerHistory: _routerHistory,
     fleetStatus,
   }) => {
+    const XXL_BREAKPOINT = 1600;
     const darkModeObservable = useObservable(startServices.theme.theme$);
     const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
 
     return (
-      <KibanaRenderContextProvider {...startServices}>
+      <KibanaRenderContextProvider
+        {...startServices}
+        theme={startServices.theme}
+        modify={{
+          breakpoint: {
+            xxl: XXL_BREAKPOINT,
+          },
+        }}
+      >
         <RedirectAppLinks
           coreStart={{
             application: startServices.application,
@@ -199,6 +206,8 @@ export const FleetAppContext: React.FC<{
           <KibanaContextProvider services={{ ...startServices }}>
             <ConfigContext.Provider value={config}>
               <KibanaVersionContext.Provider value={kibanaVersion}>
+                {/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
+                however, removing this breaks usages of `props.theme.eui` in styled components */}
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx

@@ -23,6 +23,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import styled from 'styled-components';
 
+import { MAX_FLYOUT_WIDTH } from '../../constants';
 import { useStartServices, useFlyoutContext, useCheckPermissions } from '../../hooks';
 import { FleetServerMissingESPrivileges } from '../../sections/agents/components';
 
@@ -133,7 +134,7 @@ export const FleetServerFlyout: React.FunctionComponent<Props> = ({ onClose }) =
   }
 
   return (
-    <EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} size="m">
+    <EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder aria-labelledby="FleetAddFleetServerFlyoutTitle">
         <Header
           tabs={tabs}

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx

@@ -57,6 +57,7 @@ export const CustomFields: React.FunctionComponent<Props> = ({
 
   return (
     <EuiDescribedFormGroup
+      fullWidth
       title={
         <h3>
           <FormattedMessage

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx

@@ -118,6 +118,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
   const AgentTamperProtectionSectionContent = useMemo(
     () => (
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -210,6 +211,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
   return (
     <>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -255,6 +257,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3 data-test-subj="defaultNamespaceHeader">
             <FormattedMessage
@@ -307,6 +310,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       </EuiDescribedFormGroup>
       <CustomFields updateAgentPolicy={updateAgentPolicy} agentPolicy={agentPolicy} />
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -405,6 +409,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
       {AgentTamperProtectionSection}
 
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -466,6 +471,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -506,6 +512,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -546,6 +553,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -586,6 +594,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -628,6 +637,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage
@@ -712,6 +722,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
         </EuiFormRow>
       </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx

@@ -75,13 +75,14 @@ export const AgentPolicyForm: React.FunctionComponent<Props> = ({
 
   const generalSettingsWrapper = (children: JSX.Element[]) => (
     <EuiDescribedFormGroup
+      fullWidth
       title={
-        <h4>
+        <h3>
           <FormattedMessage
             id="xpack.fleet.policyForm.generalSettingsGroupTitle"
             defaultMessage="General settings"
           />
-        </h4>
+        </h3>
       }
       description={
         <FormattedMessage

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx

@@ -47,6 +47,7 @@ export const AgentPolicyIntegrationForm: React.FunctionComponent<Props> = ({
   return (
     <EuiForm>
       <EuiDescribedFormGroup
+        fullWidth
         title={
           <h3>
             <FormattedMessage

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_yaml_flyout.tsx

@@ -24,6 +24,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
+import { MAX_FLYOUT_WIDTH } from '../../../constants';
 import { useGetOneAgentPolicyFull, useGetOneAgentPolicy, useStartServices } from '../../../hooks';
 import { Loading } from '../../../components';
 import { fullAgentPolicyToYaml, agentPolicyRouteService } from '../../../services';
@@ -71,7 +72,7 @@ export const AgentPolicyYamlFlyout = memo<{ policyId: string; onClose: () => voi
       `?apiVersion=${API_VERSIONS.public.v1}`;
 
     return (
-      <EuiFlyout onClose={onClose} size="l" maxWidth={640}>
+      <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
         <EuiFlyoutHeader hasBorder aria-labelledby="IngestManagerAgentPolicyYamlFlyoutTitle">
           <EuiTitle size="m">
             <h2 id="IngestManagerAgentPolicyYamlFlyoutTitle">

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx

@@ -14,6 +14,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
 import type { NewPackagePolicyInput, RegistryVarsEntry } from '../../../../../../types';
@@ -68,12 +69,15 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
       [advancedVars, inputVarsValidationResults.vars]
     );
 
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const flexWidth = isBiggerScreen ? 7 : 5;
+
     return (
       <EuiFlexGrid columns={2}>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="none" alignItems="flexStart">
             <EuiFlexItem grow={1} />
-            <EuiFlexItem grow={5}>
+            <EuiFlexItem grow={flexWidth}>
               <EuiText>
                 <h4>
                   <FormattedMessage

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx

@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { useRouteMatch } from 'react-router-dom';
 
@@ -163,6 +164,9 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
       showPipelinesAndMappings,
     ]);
 
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const flexWidth = isBiggerScreen ? 7 : 5;
+
     return (
       <>
         <EuiFlexGrid columns={2} data-test-subj="streamOptions.inputStreams">
@@ -170,7 +174,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="none" alignItems="flexStart">
               <EuiFlexItem grow={1} />
-              <EuiFlexItem grow={5}>
+              <EuiFlexItem grow={flexWidth}>
                 <EuiFlexGroup
                   gutterSize="none"
                   alignItems="flexStart"

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx

@@ -105,6 +105,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
           </>
         )}
         <FormGroupResponsiveFields
+          fullWidth
           title={
             <h3>
               <FormattedMessage
@@ -124,6 +125,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
             {/* Name */}
             <EuiFlexItem>
               <EuiFormRow
+                fullWidth
                 isInvalid={!!validationResults.name}
                 error={validationResults.name}
                 label={
@@ -134,6 +136,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
                 }
               >
                 <EuiFieldText
+                  fullWidth
                   readOnly={isManaged}
                   value={packagePolicy.name}
                   onChange={(e) =>
@@ -149,6 +152,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
             {/* Description */}
             <EuiFlexItem>
               <EuiFormRow
+                fullWidth
                 label={
                   <FormattedMessage
                     id="xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDescriptionInputLabel"
@@ -167,6 +171,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
                 error={validationResults.description}
               >
                 <EuiFieldText
+                  fullWidth
                   readOnly={isManaged}
                   value={packagePolicy.description}
                   onChange={(e) =>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx

@@ -369,7 +369,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
             }
           >
             <AgentPolicyFormRow
-              fullWidth={true}
+              fullWidth
               label={
                 <EuiFlexGroup justifyContent="spaceBetween">
                   <EuiFlexItem>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx

@@ -16,7 +16,7 @@ import { FLEET_KUBERNETES_PACKAGE } from '../../../../../../../../common';
 
 const CenteredRoundedBottomBar = styled(EuiBottomBar)`
   max-width: 820px;
-  margin: 0 auto;
+  margin: 0 auto !important; /* !important is needed for serverless */
   border-radius: 8px 8px 0px 0px;
 `;
 const NoAnimationCenteredRoundedBottomBar = styled(CenteredRoundedBottomBar)`
@@ -50,7 +50,7 @@ export const CreatePackagePolicyBottomBar: React.FC<{
 }) => {
   const Bar = noAnimation ? NoAnimationCenteredRoundedBottomBar : CenteredRoundedBottomBar;
   return (
-    <Bar position="sticky">
+    <Bar>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiFlexItem grow={false}>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx

@@ -17,6 +17,7 @@ import {
   EuiDescriptionListDescription,
   EuiButtonEmpty,
   EuiSpacer,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
 import { useAgentless } from '../hooks/setup_technology';
@@ -251,7 +252,8 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
       </EuiDescriptionList>
     ) : undefined;
 
-    const maxWidth = 770;
+    const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
+    const maxWidth = isBiggerScreen ? 1200 : 800;
     return (
       <WithHeaderLayout
         restrictHeaderWidth={maxWidth}

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx

@@ -57,7 +57,7 @@ const pickAgentPolicyKeysToSend = (agentPolicy: AgentPolicy) =>
   ]);
 
 const FormWrapper = styled.div`
-  max-width: 800px;
+  max-width: 1200px;
   margin-right: auto;
   margin-left: auto;
 `;

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx

@@ -36,6 +36,7 @@ import type {
 
 import type { UpgradePackagePolicyDryRunResponse } from '../../../../../../../common/types/rest_spec';
 import { useStartServices } from '../../../../hooks';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 
 const FlyoutBody = styled(EuiFlyoutBody)`
   .euiFlyoutBody__overflowContent {
@@ -167,7 +168,10 @@ export const UpgradeStatusCallout: React.FunctionComponent<{
     <>
       {isPreviousVersionFlyoutOpen && currentPackagePolicy && (
         <EuiPortal>
-          <EuiFlyout onClose={() => setIsPreviousVersionFlyoutOpen(false)} size="l" maxWidth={640}>
+          <EuiFlyout
+            onClose={() => setIsPreviousVersionFlyoutOpen(false)}
+            maxWidth={MAX_FLYOUT_WIDTH}
+          >
             <EuiFlyoutHeader hasBorder>
               <EuiTitle size="m">
                 <h2 id="FleetPackagePolicyPreviousVersionFlyoutTitle">

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx

@@ -25,6 +25,7 @@ import {
 } from '@elastic/eui';
 
 import type { NewAgentPolicy, AgentPolicy } from '../../../../types';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 import { useAuthz, useStartServices, sendCreateAgentPolicy } from '../../../../hooks';
 import { AgentPolicyForm, agentPolicyFormValidation } from '../../components';
 import { DevtoolsRequestFlyoutButton } from '../../../../components';
@@ -191,7 +192,7 @@ export const CreateAgentPolicyFlyout: React.FunctionComponent<Props> = ({
   );
 
   return (
-    <FlyoutWithHigherZIndex onClose={() => onClose()} size="l" maxWidth={400} {...restOfProps}>
+    <FlyoutWithHigherZIndex onClose={() => onClose()} {...restOfProps} maxWidth={MAX_FLYOUT_WIDTH}>
       {header}
       {body}
       {footer}

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx

@@ -25,6 +25,7 @@ import {
 
 import type { Agent } from '../../../../types';
 import { useStartServices } from '../../../../hooks';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 
 export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void }>(
   ({ agent, onClose }) => {
@@ -44,7 +45,7 @@ export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void }
     const { docLinks } = useStartServices();
 
     return (
-      <EuiFlyout onClose={onClose} size="l" maxWidth={640}>
+      <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
             <h2>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx

@@ -28,7 +28,7 @@ import {
   useStartServices,
   sendPostRetrieveAgentsByActions,
 } from '../../../../../hooks';
-import { SO_SEARCH_LIMIT } from '../../../../../constants';
+import { SO_SEARCH_LIMIT, MAX_FLYOUT_WIDTH } from '../../../../../constants';
 
 import { getKuery } from '../../utils/get_kuery';
 
@@ -129,8 +129,8 @@ export const AgentActivityFlyout: React.FunctionComponent<{
           refreshAgentActivity = false;
           onClose();
         }}
-        size="m"
         paddingSize="none"
+        maxWidth={MAX_FLYOUT_WIDTH}
       >
         <EuiFlyoutHeader aria-labelledby="FleetAgentActivityFlyoutTitle">
           <EuiPanel borderRadius="none" hasShadow={false} hasBorder={true}>

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx

@@ -28,7 +28,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import type { DownloadSource, FleetProxy } from '../../../../types';
-import { FLYOUT_MAX_WIDTH } from '../../constants';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 import { useBreadcrumbs, useStartServices } from '../../../../hooks';
 import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
 
@@ -54,7 +54,7 @@ export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourc
     [proxies]
   );
   return (
-    <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
+    <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder={true}>
         <EuiTitle size="m">
           <h2 id="FleetEditDownloadSourcesFlyoutTitle">

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx

@@ -22,8 +22,8 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { FLYOUT_MAX_WIDTH } from '../../constants';
 import type { FleetProxy } from '../../../../types';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 import { TextInput, TextAreaInput } from '../form';
 
 import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
@@ -43,7 +43,7 @@ export const FleetProxyFlyout: React.FunctionComponent<FleetProxyFlyoutProps> =
   const { inputs } = form;
 
   return (
-    <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
+    <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder={true}>
         <EuiTitle size="m">
           <h2>

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx

@@ -45,8 +45,9 @@ import { ExperimentalFeaturesService } from '../../../../../../services';
 
 import { outputType, RESERVED_CONFIG_YML_KEYS } from '../../../../../../../common/constants';
 
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
+
 import type { Output, FleetProxy } from '../../../../types';
-import { FLYOUT_MAX_WIDTH } from '../../constants';
 
 import { useBreadcrumbs, useFleetStatus, useStartServices } from '../../../../hooks';
 
@@ -230,7 +231,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
   };
 
   return (
-    <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
+    <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder={true}>
         <EuiTitle size="m">
           <h2 id="FleetEditOutputFlyoutTitle">
@@ -437,6 +438,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
                 }
               >
                 <EuiSelect
+                  fullWidth
                   data-test-subj="settingsOutputsFlyout.presetInput"
                   {...inputs.presetInput.props}
                   onChange={(e) => inputs.presetInput.setValue(e.target.value)}

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx

@@ -29,8 +29,8 @@ import {
 } from '@elastic/eui';
 
 import { MultiRowInput } from '../multi_row_input';
+import { MAX_FLYOUT_WIDTH } from '../../../../constants';
 import { useStartServices } from '../../../../hooks';
-import { FLYOUT_MAX_WIDTH } from '../../constants';
 import type { FleetServerHost, FleetProxy } from '../../../../types';
 import { TextInput } from '../form';
 import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
@@ -61,7 +61,7 @@ export const FleetServerHostsFlyout: React.FunctionComponent<FleetServerHostsFly
   );
 
   return (
-    <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
+    <EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder={true}>
         <>
           <EuiTitle size="m">

x-pack/plugins/fleet/public/applications/fleet/sections/settings/constants/index.tsx

@@ -1,8 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export const FLYOUT_MAX_WIDTH = 670;

x-pack/plugins/fleet/public/applications/integrations/app.tsx

@@ -11,14 +11,13 @@ import { EuiPortal } from '@elastic/eui';
 import type { History } from 'history';
 import { Redirect } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
-import useObservable from 'react-use/lib/useObservable';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
+import useObservable from 'react-use/lib/useObservable';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 
 import type { FleetConfigType, FleetStartServices } from '../../plugin';
 
@@ -73,13 +72,22 @@ export const IntegrationsAppContext: React.FC<{
     setHeaderActionMenu,
     fleetStatus,
   }) => {
-    const theme = useObservable(startServices.theme.theme$);
+    const XXL_BREAKPOINT = 1600;
-    const isDarkMode = theme && theme.darkMode;
+    const darkModeObservable = useObservable(startServices.theme.theme$);
+    const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
 
     const CloudContext = startServices.cloud?.CloudContextProvider || EmptyContext;
 
     return (
-      <KibanaRenderContextProvider {...startServices}>
+      <KibanaRenderContextProvider
+        {...startServices}
+        theme={startServices.theme}
+        modify={{
+          breakpoint: {
+            xxl: XXL_BREAKPOINT,
+          },
+        }}
+      >
         <RedirectAppLinks
           coreStart={{
             application: startServices.application,
@@ -88,6 +96,8 @@ export const IntegrationsAppContext: React.FC<{
           <KibanaContextProvider services={{ ...startServices }}>
             <ConfigContext.Provider value={config}>
               <KibanaVersionContext.Provider value={kibanaVersion}>
+                {/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
+                however, removing this breaks usages of `props.theme.eui` in styled components */}
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx

@@ -99,7 +99,7 @@ export const SearchBox: FunctionComponent<Props> = ({
       onChange={(e) => onQueryChange(e)}
       isClearable={true}
       incremental={true}
-      fullWidth={true}
+      fullWidth
       prepend={
         selectedCategoryTitle ? (
           <EuiText

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx

@@ -283,7 +283,7 @@ export const AssetsPage = ({ packageInfo, refetchPackageInfo }: AssetsPanelProps
   return (
     <EuiFlexGroup alignItems="flexStart">
       <EuiFlexItem grow={1} />
-      <EuiFlexItem grow={6}>
+      <EuiFlexItem grow={7}>
         {fetchError && (
           <>
             <Error

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/configs/index.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 import React from 'react';
-import styled from 'styled-components';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -28,10 +27,6 @@ import { PrereleaseCallout } from '../overview/overview';
 
 import { isPackagePrerelease } from '../../../../../../../../common/services';
 
-const FlexItemWithMaxWidth = styled(EuiFlexItem)`
-  max-width: 1000px;
-`;
-
 interface ConfigsProps {
   packageInfo: PackageInfo;
 }
@@ -62,7 +57,7 @@ export const Configs: React.FC<ConfigsProps> = ({ packageInfo }) => {
   return (
     <EuiFlexGroup data-test-subj="epm.Configs" alignItems="flexStart">
       <EuiFlexItem grow={1} />
-      <FlexItemWithMaxWidth grow={6}>
+      <EuiFlexItem grow={7}>
         {isLoading && !configs ? (
           <EuiSkeletonText lines={10} />
         ) : (
@@ -122,7 +117,7 @@ export const Configs: React.FC<ConfigsProps> = ({ packageInfo }) => {
             </EuiCodeBlock>
           </>
         )}
-      </FlexItemWithMaxWidth>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx

@@ -25,7 +25,7 @@ export const CustomViewPage: React.FC<Props> = memo(({ packageInfo }) => {
   return customViewExtension ? (
     <EuiFlexGroup alignItems="flexStart">
       <EuiFlexItem grow={1} />
-      <EuiFlexItem grow={6}>
+      <EuiFlexItem grow={7}>
         <ExtensionWrapper>
           <customViewExtension.Component pkgkey={pkgkey} packageInfo={packageInfo} />
         </ExtensionWrapper>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx

@@ -68,52 +68,44 @@ export const DocumentationPage: React.FunctionComponent<Props> = ({ packageInfo,
   const { docLinks } = useStartServices();
   const showDocumentation = hasDocumentation({ packageInfo, integration });
 
-  const content = (
-    <>
-      <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween">
-        <EuiFlexItem grow={6}>
-          <EuiText>
-            <FormattedMessage
-              id="xpack.fleet.epm.packageDetails.apiReference.description"
-              defaultMessage="This documents all the inputs, streams, and variables available to use this integration programmatically via the Fleet Kibana API. {learnMore}"
-              values={{
-                learnMore: (
-                  <EuiLink href={docLinks.links.fleet.api} external={true}>
-                    <FormattedMessage
-                      id="xpack.fleet.epm.packageDetails.apiReference.learnMoreLink"
-                      defaultMessage="Learn more"
-                    />
-                  </EuiLink>
-                ),
-              }}
-            />
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      {showDocumentation ? (
-        <>
-          <PackageVars vars={packageInfo.vars} />
-          <Inputs packageInfo={packageInfo} integration={integration} />
-        </>
-      ) : (
-        <EuiCallOut
-          title={
-            <FormattedMessage
-              id="xpack.fleet.epm.packageDetails.apiReference.noDocumentationMessage"
-              defaultMessage="This integration has no references available."
-            />
-          }
-        />
-      )}
-      <EuiSpacer size="m" />
-    </>
-  );
-
   return (
     <EuiFlexGroup alignItems="flexStart">
       <EuiFlexItem grow={1} />
-      <EuiFlexItem grow={6}>{content}</EuiFlexItem>
+      <EuiFlexItem grow={7}>
+        <EuiText>
+          <FormattedMessage
+            id="xpack.fleet.epm.packageDetails.apiReference.description"
+            defaultMessage="This documents all the inputs, streams, and variables available to use this integration programmatically via the Fleet Kibana API. {learnMore}"
+            values={{
+              learnMore: (
+                <EuiLink href={docLinks.links.fleet.api} external={true}>
+                  <FormattedMessage
+                    id="xpack.fleet.epm.packageDetails.apiReference.learnMoreLink"
+                    defaultMessage="Learn more"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+        <EuiSpacer size="m" />
+        {showDocumentation ? (
+          <>
+            <PackageVars vars={packageInfo.vars} />
+            <Inputs packageInfo={packageInfo} integration={integration} />
+          </>
+        ) : (
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="xpack.fleet.epm.packageDetails.apiReference.noDocumentationMessage"
+                defaultMessage="This integration has no references available."
+              />
+            }
+          />
+        )}
+        <EuiSpacer size="m" />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx

@@ -355,7 +355,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
     <AgentPolicyRefreshContext.Provider value={{ refresh: refreshPolicies }}>
       <EuiFlexGroup alignItems="flexStart">
         <EuiFlexItem grow={1} />
-        <EuiFlexItem grow={6}>
+        <EuiFlexItem grow={7}>
           <EuiBasicTable
             items={packageAndAgentPolicies || []}
             columns={columns}

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx

@@ -256,7 +256,7 @@ export const SettingsPage: React.FC<Props> = memo(({ packageInfo, startServices
     <>
       <EuiFlexGroup alignItems="flexStart">
         <EuiFlexItem grow={1} />
-        <EuiFlexItem grow={6}>
+        <EuiFlexItem grow={7}>
           <EuiText>
             <EuiTitle>
               <h3>

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx

@@ -96,7 +96,7 @@ export const AgentPolicySelection: React.FC<Props> = (props) => {
       </EuiText>
       <EuiSpacer size="m" />
       <AgentPolicyFormRow
-        fullWidth={true}
+        fullWidth
         label={
           authz.fleet.allAgentPolicies && (
             <EuiFlexGroup justifyContent="flexEnd">

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx

@@ -29,7 +29,7 @@ import {
   useAgentEnrollmentFlyoutData,
   useFleetServerHostsForPolicy,
 } from '../../hooks';
-import { FLEET_SERVER_PACKAGE } from '../../constants';
+import { FLEET_SERVER_PACKAGE, MAX_FLYOUT_WIDTH } from '../../constants';
 import type { PackagePolicy, AgentPolicy } from '../../types';
 
 import { Loading } from '..';
@@ -106,7 +106,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<FlyOutProps> = ({
   const { cloudSecurityIntegration } = useCloudSecurityIntegration(selectedPolicy ?? undefined);
 
   return (
-    <EuiFlyout data-test-subj="agentEnrollmentFlyout" onClose={onClose} size="m">
+    <EuiFlyout data-test-subj="agentEnrollmentFlyout" onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
       <EuiFlyoutHeader hasBorder aria-labelledby="FleetAgentEnrollmentFlyoutTitle">
         <EuiTitle size="m">
           <h2 id="FleetAgentEnrollmentFlyoutTitle">

x-pack/plugins/fleet/public/components/header.tsx

@@ -22,8 +22,12 @@ const Container = styled.div`
   }
 `;
 
-const Wrapper = styled.div<{ maxWidth?: number }>`
+const Wrapper = styled.div<{ maxWidth?: number | string }>`
-  max-width: ${(props) => props.maxWidth || 1200}px;
+  max-width: ${(props) =>
+    typeof props.maxWidth === 'number'
+      ? `${props.maxWidth || 1200}px` || props.maxWidth
+      : props.maxWidth};
+
   margin-left: auto;
   margin-right: auto;
   padding-top: ${(props) => props.theme.eui.euiSizeXL};
@@ -39,7 +43,7 @@ const Tabs = styled(EuiTabs)`
 `;
 
 export interface HeaderProps {
-  maxWidth?: number;
+  maxWidth?: number | string;
   leftColumn?: JSX.Element;
   rightColumn?: JSX.Element;
   rightColumnGrow?: EuiFlexItemProps['grow'];

x-pack/plugins/fleet/public/components/index.ts

@@ -16,7 +16,6 @@ export { Header } from './header';
 export { NewEnrollmentTokenModal } from './new_enrollment_key_modal';
 export { AgentPolicyPackageBadge } from './agent_policy_package_badge';
 export { AgentPolicyPackageBadges } from './agent_policy_package_badges';
-export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item';
 export { PackagePolicyDeleteProvider } from './package_policy_delete_provider';
 export { PackagePolicyActionsMenu } from './package_policy_actions_menu';
 export { AddAgentHelpPopover } from './add_agent_help_popover';

x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx

@@ -31,6 +31,7 @@ import {
   useGetUninstallToken,
   useGetUninstallTokens,
 } from '../../hooks/use_request/uninstall_tokens';
+import { MAX_FLYOUT_WIDTH } from '../../constants';
 
 import { UninstallCommandsPerPlatform } from './uninstall_commands_per_platform';
 import type { UninstallCommandTarget } from './types';
@@ -185,7 +186,11 @@ export const UninstallCommandFlyout: React.FunctionComponent<UninstallCommandFly
   target,
 }) => {
   return (
-    <EuiFlyout onClose={onClose} data-test-subj="uninstall-command-flyout">
+    <EuiFlyout
+      onClose={onClose}
+      data-test-subj="uninstall-command-flyout"
+      maxWidth={MAX_FLYOUT_WIDTH}
+    >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
           <h2>

x-pack/plugins/fleet/public/constants/index.ts

@@ -60,3 +60,5 @@ export type TourKey = keyof typeof TOUR_STORAGE_KEYS;
 export type TOUR_STORAGE_CONFIG = {
   [k in TourKey]: TourConfig;
 };
+
+export const MAX_FLYOUT_WIDTH = 800;

x-pack/plugins/fleet/public/layouts/with_header.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiPageBody, EuiSpacer } from '@elastic/eui';
+import { EuiPageBody, EuiSpacer, useIsWithinMinBreakpoint } from '@elastic/eui';
 
 import type { HeaderProps } from '../components';
 import { Header } from '../components';
@@ -26,23 +26,28 @@ export const WithHeaderLayout: React.FC<WithHeaderLayoutProps> = ({
   children,
   'data-test-subj': dataTestSubj,
   ...rest
-}) => (
+}) => {
-  <Wrapper>
+  const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
-    <Header
+  const fullWidthSize = isBiggerScreen ? '80%' : '100%';
-      maxWidth={restrictHeaderWidth}
+
-      data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
+  return (
-      {...rest}
+    <Wrapper>
-    />
+      <Header
-    <Page
+        maxWidth={restrictHeaderWidth || fullWidthSize}
-      restrictWidth={restrictWidth || 1200}
+        data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
-      data-test-subj={dataTestSubj ? `${dataTestSubj}_page` : undefined}
+        {...rest}
-    >
+      />
-      <EuiPageBody>
+      <Page
-        <ContentWrapper>
+        restrictWidth={restrictWidth || fullWidthSize}
-          <EuiSpacer size="m" />
+        data-test-subj={dataTestSubj ? `${dataTestSubj}_page` : undefined}
-          {children}
+      >
-        </ContentWrapper>
+        <EuiPageBody>
-      </EuiPageBody>
+          <ContentWrapper>
-    </Page>
+            <EuiSpacer size="m" />
-  </Wrapper>
+            {children}
-);
+          </ContentWrapper>
+        </EuiPageBody>
+      </Page>
+    </Wrapper>
+  );
+};