Skip to content

Alerts table in Rule Preview panel fills container width#214028

Merged
rylnd merged 1 commit intoelastic:mainfrom
rylnd:rylnd/rule_preview_alerts_width_fix
Mar 12, 2025
Merged

Alerts table in Rule Preview panel fills container width#214028
rylnd merged 1 commit intoelastic:mainfrom
rylnd:rylnd/rule_preview_alerts_width_fix

Conversation

@rylnd
Copy link
Contributor

@rylnd rylnd commented Mar 11, 2025

Summary

Addresses #213706.

I suspect that this stopped working when #206523 removed the FullScreenContainer from the inner StatefulEventsViewer component; that change combined with the display:flex on this parent element caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container. Since the table is the only element within this container, I saw no reason why flexbox was needed here; testing has confirmed this.

Screenshot (after fix; see bug for "before" image)

Screenshot 2025-03-11 at 5 35 43 PM

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing seems to have confirmed
this.
@rylnd rylnd added release_note:fix Team:Detections and Resp Security Detection Response Team Feature:Detection Rule Preview Security Solution Detection Rule Preview feature Team:Detection Engine Security Solution Detection Engine Area labels Mar 11, 2025
@rylnd rylnd self-assigned this Mar 11, 2025
@rylnd rylnd requested a review from a team as a code owner March 11, 2025 22:37
@rylnd rylnd requested a review from nkhristinin March 11, 2025 22:37
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detections-response (Team:Detections and Resp)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detection-engine (Team:Detection Engine)

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 8.9MB 8.9MB -27.0B

cc @rylnd

Copy link
Contributor

@yctercero yctercero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Debugged this live on zoom. LGTM - thanks for grabbing this one and the quick fix!

@rylnd rylnd merged commit 01e31ea into elastic:main Mar 12, 2025
30 checks passed
@rylnd rylnd deleted the rylnd/rule_preview_alerts_width_fix branch March 12, 2025 19:21
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.16, 8.17, 8.18, 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13819775560

@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.16, 8.17, 8.18, 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13819812359

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.16
8.17
8.18
8.x
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 12, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>

(cherry picked from commit 01e31ea)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.16
8.17
8.18
8.x
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Mar 12, 2025
…) (#214274)

# Backport

This will backport the following commits from `main` to `9.0`:
- [Alerts table in Rule Preview panel fills container width
(#214028)](#214028)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ryland
Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections
and Resp","Feature:Detection Rule
Preview","backport:prev-minor","backport:prev-major","Team:Detection
Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel
fills container
width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}]
BACKPORT-->

Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
kibanamachine added a commit that referenced this pull request Mar 12, 2025
…) (#214273)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Alerts table in Rule Preview panel fills container width
(#214028)](#214028)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ryland
Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections
and Resp","Feature:Detection Rule
Preview","backport:prev-minor","backport:prev-major","Team:Detection
Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel
fills container
width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}]
BACKPORT-->

Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
kibanamachine added a commit that referenced this pull request Mar 12, 2025
) (#214272)

# Backport

This will backport the following commits from `main` to `8.18`:
- [Alerts table in Rule Preview panel fills container width
(#214028)](#214028)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ryland
Herrick","email":"ryalnd@gmail.com"},"sourceCommit":{"committedDate":"2025-03-12T19:21:33Z","message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Detections
and Resp","Feature:Detection Rule
Preview","backport:prev-minor","backport:prev-major","Team:Detection
Engine","v8.18.0","v9.1.0"],"title":"Alerts table in Rule Preview panel
fills container
width","number":214028,"url":"https://github.com/elastic/kibana/pull/214028","mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214028","number":214028,"mergeCommit":{"message":"Alerts
table in Rule Preview panel fills container width (#214028)\n\n##
Summary\n\nAddresses
https://github.com/elastic/kibana/issues/213706.\n\nI suspect that this
stopped working when #206523 removed the\n`FullScreenContainer` from the
inner StatefulEventsViewer component;\nthat change combined with the
`display:flex` on this parent element\ncaused the table to no longer
grow as expected.\n\nLuckily, the fix here was simply not using flexbox
on the container.\nSince the table is the only element within this
container, I saw no\nreason why flexbox was needed here; testing has
confirmed this.\n\n### Screenshot (after fix; see bug for \"before\"
image)\n<kbd><img width=\"1709\" alt=\"Screenshot 2025-03-11 at 5 35
43 PM\"\nsrc=\"https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09\"\n/></kbd>","sha":"01e31ea5f25fe1ca4d8ee30369ba5465f3041498"}}]}]
BACKPORT-->

Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
)

## Summary

Addresses elastic#213706.

I suspect that this stopped working when elastic#206523 removed the
`FullScreenContainer` from the inner StatefulEventsViewer component;
that change combined with the `display:flex` on this parent element
caused the table to no longer grow as expected.

Luckily, the fix here was simply not using flexbox on the container.
Since the table is the only element within this container, I saw no
reason why flexbox was needed here; testing has confirmed this.

### Screenshot (after fix; see bug for "before" image)
<kbd><img width="1709" alt="Screenshot 2025-03-11 at 5 35 43 PM"
src="https://github.com/user-attachments/assets/108be815-00e2-48b7-8821-e63566eefa09"
/></kbd>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Detection Rule Preview Security Solution Detection Rule Preview feature release_note:fix Team:Detection Engine Security Solution Detection Engine Area Team:Detections and Resp Security Detection Response Team v8.18.0 v8.19.0 v9.0.0 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants