Fix long combo box items breaking out of flex item width (#72512) (#72547)

jen-huang · web-flow · commit dba747990284 · 2020-07-20T17:31:19.000-07:00
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_stream.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_stream.tsx
@@ -5,6 +5,7 @@
  */
 import React, { useState, Fragment, memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexGrid,
@@ -23,6 +24,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 PackageConfigInputStreamConfig: React.FunctionComponent<{
   packageInputStream: RegistryStream;
   packageConfigInputStream: PackageConfigInputStream;
@@ -91,7 +96,7 @@ export const PackageConfigInputStreamConfig: React.FunctionComponent<{
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <FlexItemWithMaxWidth>
           <EuiFlexGroup direction="column" gutterSize="m">
             {requiredVars.map((varDef) => {
               const { name: varName, type: varType } = varDef;
@@ -178,7 +183,7 @@ export const PackageConfigInputStreamConfig: React.FunctionComponent<{
               </Fragment>
             ) : null}
           </EuiFlexGroup>
-        </EuiFlexItem>
+        </FlexItemWithMaxWidth>
       </EuiFlexGrid>
     );
   }
