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

jen-huang · Jul 20, 2020 · 51fae67 · 51fae67
1 parent 8283561
commit 51fae67
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/...ctions/agent_config/create_package_config_page/components/package_config_input_stream.tsx b/...ctions/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>
  );
  }