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

This commit is contained in:
Jen Huang 2020-07-20 15:16:46 -07:00 committed by GitHub
parent a221e04b3c
commit 709e0a0a11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>
);
}