Skip to content

Commit

Permalink
Fix long combo box items breaking out of flex item width (elastic#72512)
Browse files Browse the repository at this point in the history
  • Loading branch information
jen-huang committed Jul 20, 2020
1 parent adfada0 commit 019c9a8
Showing 1 changed file with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -178,7 +183,7 @@ export const PackageConfigInputStreamConfig: React.FunctionComponent<{
</Fragment>
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</FlexItemWithMaxWidth>
</EuiFlexGrid>
);
}
Expand Down

0 comments on commit 019c9a8

Please sign in to comment.