Alerts table in Rule Preview panel fills container width#214028
Alerts table in Rule Preview panel fills container width#214028rylnd merged 1 commit intoelastic:mainfrom
Conversation
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.
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-detection-engine (Team:Detection Engine) |
yctercero
left a comment
There was a problem hiding this comment.
Debugged this live on zoom. LGTM - thanks for grabbing this one and the quick fix!
|
Starting backport for target branches: 8.16, 8.17, 8.18, 8.x, 9.0 https://github.com/elastic/kibana/actions/runs/13819775560 |
|
Starting backport for target branches: 8.16, 8.17, 8.18, 8.x, 9.0 https://github.com/elastic/kibana/actions/runs/13819812359 |
) ## 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)
) ## 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)
) ## 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)
) ## 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)
) ## 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)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
) ## 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)
) ## 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)
) ## 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)
) ## 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)
) ## 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)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…) (#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>
…) (#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>
) (#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>
) ## 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>
Summary
Addresses #213706.
I suspect that this stopped working when #206523 removed the
FullScreenContainerfrom the inner StatefulEventsViewer component; that change combined with thedisplay:flexon 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)