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

elastic · Jul 28, 2020 · f61df05 · f61df05
1 parent 2ea2f10
commit f61df05
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/...ctions/agent_config/create_package_config_page/components/package_config_input_config.tsx b/...ctions/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>
     );
   }