## Summary

Fixes [a CSS issue where Timeline field truncation](#65170) wasn't working.

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`

x-pack/plugins/siem/public/components/with_hover_actions/index.tsx

@@ -6,8 +6,17 @@
 
 import { EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+
 import { IS_DRAGGING_CLASS_NAME } from '../drag_and_drop/helpers';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WithHoverActionsPopover = (styled(EuiPopover as any)`
+  .euiPopover__anchor {
+    width: 100%;
+  }
+` as unknown) as typeof EuiPopover;
+
 interface Props {
   /**
    * Always show the hover menu contents (default: false)
@@ -59,7 +68,7 @@ export const WithHoverActions = React.memo<Props>(
 
     const popover = useMemo(() => {
       return (
-        <EuiPopover
+        <WithHoverActionsPopover
           anchorPosition={'downCenter'}
           button={content}
           closePopover={onMouseLeave}
@@ -68,7 +77,7 @@ export const WithHoverActions = React.memo<Props>(
           panelPaddingSize={!alwaysShow ? 's' : 'none'}
         >
           {isOpen ? hoverContent : null}
-        </EuiPopover>
+        </WithHoverActionsPopover>
       );
     }, [content, onMouseLeave, isOpen, alwaysShow, hoverContent]);