diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
index b48cc546fe78c..7c9accd4cef49 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
+++ b/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -7,6 +7,7 @@
 import { EuiLink, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { isString, isEmpty } from 'lodash/fp';
 import React from 'react';
+import styled from 'styled-components';
 
 import { DefaultDraggable } from '../../../draggables';
 import { getEmptyTagValue } from '../../../empty_value';
@@ -18,6 +19,10 @@ import endPointSvg from '../../../../utils/logo_endpoint/64_color.svg';
 
 import * as i18n from './translations';
 
+const EventModuleFlexItem = styled(EuiFlexItem)`
+  width: 100%;
+`;
+
 export const renderRuleName = ({
   contextId,
   eventId,
@@ -87,7 +92,7 @@ export const renderEventModule = ({
         endpointRefUrl != null && !isEmpty(endpointRefUrl) ? 'flexStart' : 'spaceBetween'
       }
     >
-      <EuiFlexItem>
+      <EventModuleFlexItem>
         <DefaultDraggable
           field={fieldName}
           id={`event-details-value-default-draggable-${contextId}-${eventId}-${fieldName}-${value}-${moduleName}`}
@@ -96,7 +101,7 @@ export const renderEventModule = ({
         >
           {content}
         </DefaultDraggable>
-      </EuiFlexItem>
+      </EventModuleFlexItem>
       {endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
         <EuiFlexItem grow={false}>
           <EuiToolTip
diff --git a/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx b/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
index 86a9acc486b6d..8679dae448332 100644
--- a/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
+++ b/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]);