From f61df057727c4adf0aa4bd1e72f108ec23945567 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Tue, 28 Jul 2020 10:57:38 -0700
Subject: [PATCH] Fix long combo box items breaking out of flex item width
 (#73351)

---
 .../components/package_config_input_config.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_config.tsx
index 98f04dbd926598..fd3a64bc760a05 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_config.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_config.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState, Fragment, memo, useMemo } from 'react';
+import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexGrid,
@@ -21,6 +22,10 @@ import {
 } from '../services';
 import { PackageConfigInputVarField } from './package_config_input_var_field';
 
+const FlexItemWithMaxWidth = styled(EuiFlexItem)`
+  max-width: calc(50% - ${(props) => props.theme.eui.euiSizeL});
+`;
+
 export const PackageConfigInputConfig: React.FunctionComponent<{
   packageInputVars?: RegistryVarsEntry[];
   packageConfigInput: PackageConfigInput;
@@ -88,7 +93,7 @@ export const PackageConfigInputConfig: React.FunctionComponent<{
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <FlexItemWithMaxWidth>
           <EuiFlexGroup direction="column" gutterSize="m">
             {requiredVars.map((varDef) => {
               const { name: varName, type: varType } = varDef;
@@ -176,7 +181,7 @@ export const PackageConfigInputConfig: React.FunctionComponent<{
               </Fragment>
             ) : null}
           </EuiFlexGroup>
-        </EuiFlexItem>
+        </FlexItemWithMaxWidth>
       </EuiFlexGrid>
     );
   }