Fixes viewer overflow bug (#75489) (#75572)

elastic · Aug 20, 2020 · cf12eac · cf12eac
1 parent 900100d
commit cf12eac
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/..._solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx b/..._solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
@@ -13,6 +13,7 @@ import {
   EuiTableFieldDataColumnType,
   EuiHideFor,
   EuiBadge,
+  EuiBadgeGroup,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import styled, { css } from 'styled-components';
@@ -60,6 +61,10 @@ const MyNestedValue = styled.span`
   margin-left: ${({ theme }) => theme.eui.euiSizeS};
 `;
 
+const ValueBadgeGroup = styled(EuiBadgeGroup)`
+  width: 100%;
+`;
+
 interface ExceptionEntriesComponentProps {
   entries: FormattedEntry[];
   disableDelete: boolean;
@@ -115,15 +120,11 @@ const ExceptionEntriesComponent = ({
         render: (values: string | string[] | null) => {
           if (Array.isArray(values)) {
             return (
-              <EuiFlexGroup gutterSize="xs" direction="row" justifyContent="flexStart">
+              <ValueBadgeGroup gutterSize="xs">
                 {values.map((value) => {
-                  return (
-                    <EuiFlexItem key={value} grow={false}>
-                      <EuiBadge color="#DDD">{value}</EuiBadge>
-                    </EuiFlexItem>
-                  );
+                  return <EuiBadge color="#DDD">{value}</EuiBadge>;
                 })}
-              </EuiFlexGroup>
+              </ValueBadgeGroup>
             );
           } else {
             return values ?? getEmptyValue();