[Security Solution] Suggestion: Alerting application needs to used fixed layouts for proper scrolling / virtualization

[snide]

The current Alerting page layout should likely utilize a fixed layout similar to Discover to better expose affordability around scrolling, pagination and screen real estate.

Take a look at discover. It has the following benefits.

• The horizontal scroll if needed is always available
• The controls for the grid remain in the same position
• The controls for pagination remain in the same position and are known
• The charts are vertically minimal and can be hidden
• Real estate is focused on the content of the results
• Because a height is set, the grid can be properly virtualized, making it MUCH more performant

Now take a look at the alerting table view

[elasticmachine]

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

[Max-Iskra]

Figma mockup/prototype: https://ela.st/proper-scrolling

• Improved overall paddings over the page for better visibility of content
• Collapsed charts, see: [Security Solution] Suggestion. Collapse Alerting graphs into one view #120282
• Added chart options button in the title section (best place TBD)
• Added Hide/Show chart dropdown (aka discover page)
• Browsing now table of alerts with a sticky toolbar at the top and sticky pagination at the bottom.
  Note: added 1px line above pagination tab and title-headers where needed. see: [Security Solution] Fixed search bar needs shadow definition #120281

Proper-Scrolling.mp4

• The table scrolls if needed are always available

Exploration

• We can use the button without a dropdown for better discoverability since there's only one action for hiding/showing charts

cc @snide @paulewing

[Max-Iskra]

Updated view without big title based on issue #120287

Chart Shown

Chart Hided