[Security Solution] The cross icon overlaps the scroller and is not placed inside the flyout box

[muskangulati-qasource]

Describe the bug: The cross icon overlaps the scroller and is not placed inside the flyout box

Kibana/Elasticsearch Stack version VERSION: 8.10.0 BUILD: 66350 COMMIT: 824bcbfd9972c61e79ca9def6d43b550c5ff2999

Browser and Browser OS Version: Chrome for windows OS Version: 116.0

Elastic Endpoint Version: v8.10.2

Original install method: Build summary: https://staging.elastic.co/8.10.0-5831d3be/summary-8.10.0.html

Functional Area: Alert Flyout

Initial Setup:

• None

Steps to reproduce

• Navigate to alerts tab
• Click on expand icon for any alert to open the Alert Details Flyout
• Observe the cross icon on the top right side of the flyout is not placed inside the box

Additional Observation None

Current behavior The cross icon overlaps the scroller and is not placed inside the flyout box

Expected behavior: The cross icon should not overlap the scroller and should be placed inside the flyout box

Screenshot:

Errors in browser console: None

Any additional context (logs, chat logs, magical formulas, etc.): None

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[muskangulati-qasource]

@karanbirsingh-qasource please review!!

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[cybersecdiva]

Tested in 8.11.0 BC4

VERSION: 8.11.0 BC4
BUILD: 68044
COMMIT: caa3613b5412552646e95d80bbbc6618d704ba09

Preconditions:

• Kibana must be running
• Alerts generated

Describe the bug: The cross icon overlaps the scroller and is not placed inside the flyout box

Steps to reproduce:

1. Navigate to Security —> Alerts
2. Click on Expand details icon on any alert to open Alert Flyout
3. Observe cross icon ❌ on the scroller, on the top right side) in Alert flyout

Browser and Browser OS Version Chrome for Windows Firefox for Windows Chrome for MacOS Firefox for MacOS

Current behavior

Cross icon ❌ is not overlapping the scroller and placed inside the flyout

Expected behavior:

Cross icon ❌ is not overlapping the scroller and placed inside the flyout

Observations:

• Validating that this issue is now fixed ✅ in 8.11 BC4
• Issue tested in both Windows and MacOS environment on both Firefox and Chrome

Screenshots of behavior:

cc: @MadameSheema @michaelolo24 @PhilippeOberti QA Validation issue is now fixed ✅ in 8.11 BC4 and closing this issue out