wrapping long tags on agent details page

Author: juliaElastic

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tags.tsx

@@ -8,9 +8,16 @@
 import { EuiToolTip } from '@elastic/eui';
 import { take } from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
 
 import { truncateTag, MAX_TAG_DISPLAY_LENGTH } from '../utils';
 
+const Wrapped = styled.div`
+  .wrappedText {
+    white-space: pre-wrap;
+  }
+`;
+
 interface Props {
   tags: string[];
 }
@@ -22,13 +29,16 @@ export const Tags: React.FunctionComponent<Props> = ({ tags }) => {
   return (
     <>
       {tags.length > MAX_TAGS_TO_DISPLAY ? (
-        <>
-          <EuiToolTip content={<span data-test-subj="agentTagsTooltip">{tags.join(', ')}</span>}>
+        <Wrapped>
+          <EuiToolTip
+            anchorClassName={'wrappedText'}
+            content={<span data-test-subj="agentTagsTooltip">{tags.join(', ')}</span>}
+          >
             <span data-test-subj="agentTags">
               {take(tags, 3).map(truncateTag).join(', ')} + {tags.length - MAX_TAGS_TO_DISPLAY} more
             </span>
           </EuiToolTip>
-        </>
+        </Wrapped>
       ) : (
         <span data-test-subj="agentTags">
           {tags.map((tag, index) => (