Fix data grid full screen stacking#267339
Merged
tcalopes merged 2 commits intoMay 6, 2026
Merged
Conversation
tcalopes
added
release_note:skip
|
Pinging @elastic/security-entity-analytics (Team:Entity Analytics) |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
History
cc @tcalopes |
davismcphee
approved these changes
May 4, 2026
Contributor
davismcphee
left a comment
davismcphee
left a comment
There was a problem hiding this comment.
Code-only review, Data Discovery changes LGTM 👍 Unfortunate full screen data grid handling is so tricky, but not sure what else could be done here.
tcalopes
added
backport:version
Contributor
|
Starting backport for target branches: 9.4 https://github.com/elastic/kibana/actions/runs/25437917546 |
Contributor
💚 All backports created successfully
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
May 6, 2026
# Backport This will backport the following commits from `main` to `9.4`: - [Fix data grid full screen stacking (#267339)](#267339) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"tcalopes","email":"tatiana.lopes@elastic.co"},"sourceCommit":{"committedDate":"2026-05-06T13:22:07Z","message":"Fix data grid full screen stacking (#267339)\n\n## Summary\nWhen entering full-screen mode on the entities table and opening the\nAgent Builder chat, the chant sidebar and its resize handle were hidden\nbehind the DataGrid overlay but still account for when positioning the\nflyout\n\n- `use_full_screen_watcher.ts` + `layout_sidebar.tsx`: introduced a\n`data-kbn-preserve-zindex` attribute to exclude elements from the\nfull-screen z-index reset. This is added to the Chrome sidebar to\npreserve its stacking context\n- `grid_global_app_style.tsx`: added a constrain to the grid's right\nedge (_var(--kbn-layout--sidebar-width)_), so the full-screen DataGrid\nno longer covers the sidebar column when the Agent Builder chat is open\n\n## How to test\n\n1. Start Elasticsearch locally\n2. Start Kibana locally\n <details>\n <summary>feature flags used</summary>\n \n uiSettings:\n overrides:\n agentBuilder:experimentalFeatures: true\n securitySolution:entityStoreEnableV2: true\n \n xpack.securitySolution.enableExperimental:\n - entityAnalyticsEntityStoreV2\n - entityAnalyticsNewHomePageEnabled\n </details>\n3. Add at least one entity to test\n <details>\n <summary>Kibana Dev Tools</summary>\n\n POST .entities.v2.latest.security_default-00001/_doc\n {\n \"@timestamp\": \"2026-05-01T12:00:00.000Z\",\n \"user\": { \"name\": \"test.user\" },\n \"entity\": {\n \"name\": \"test.user\",\n \"type\": \"Identity\",\n \"id\": \"user:test.user\",\n\"EngineMetadata\": { \"Type\": \"user\", \"UntypedId\": \"test.user\" }\n }\n }\n </details>\n4. Navigate to Security → Entity Analytics\n5. Scroll to the entities table and click the full-screen icon\n6. Click any entity row to open the entity flyout\n7. Click _Add to chat_: click on expand details -> risk contribution to\nsee the button\n8. Confirm that the Agent Builder sidebar is visible and the resize\nhandle on the sidebar's left edge is visible and draggable\n\n### Before\n\n<img width=\"1917\" height=\"842\" alt=\"Screenshot 2026-05-01 at 5 08 58 PM\"\nsrc=\"https://github.com/user-attachments/assets/1deaa2f3-b753-4092-9fc9-ade31879f3f3\"\n/>\n\n### After\n\n\nhttps://github.com/user-attachments/assets/829a60fc-80cc-4318-98a8-a69a65a4f89e","sha":"083666ed433da868f10af3c2d780c9f65d84f232","branchLabelMapping":{"^v9.5.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Entity Analytics","backport:version","v9.5.0","v9.4.1"],"title":"Fix data grid full screen stacking","number":267339,"url":"https://github.com/elastic/kibana/pull/267339","mergeCommit":{"message":"Fix data grid full screen stacking (#267339)\n\n## Summary\nWhen entering full-screen mode on the entities table and opening the\nAgent Builder chat, the chant sidebar and its resize handle were hidden\nbehind the DataGrid overlay but still account for when positioning the\nflyout\n\n- `use_full_screen_watcher.ts` + `layout_sidebar.tsx`: introduced a\n`data-kbn-preserve-zindex` attribute to exclude elements from the\nfull-screen z-index reset. This is added to the Chrome sidebar to\npreserve its stacking context\n- `grid_global_app_style.tsx`: added a constrain to the grid's right\nedge (_var(--kbn-layout--sidebar-width)_), so the full-screen DataGrid\nno longer covers the sidebar column when the Agent Builder chat is open\n\n## How to test\n\n1. Start Elasticsearch locally\n2. Start Kibana locally\n <details>\n <summary>feature flags used</summary>\n \n uiSettings:\n overrides:\n agentBuilder:experimentalFeatures: true\n securitySolution:entityStoreEnableV2: true\n \n xpack.securitySolution.enableExperimental:\n - entityAnalyticsEntityStoreV2\n - entityAnalyticsNewHomePageEnabled\n </details>\n3. Add at least one entity to test\n <details>\n <summary>Kibana Dev Tools</summary>\n\n POST .entities.v2.latest.security_default-00001/_doc\n {\n \"@timestamp\": \"2026-05-01T12:00:00.000Z\",\n \"user\": { \"name\": \"test.user\" },\n \"entity\": {\n \"name\": \"test.user\",\n \"type\": \"Identity\",\n \"id\": \"user:test.user\",\n\"EngineMetadata\": { \"Type\": \"user\", \"UntypedId\": \"test.user\" }\n }\n }\n </details>\n4. Navigate to Security → Entity Analytics\n5. Scroll to the entities table and click the full-screen icon\n6. Click any entity row to open the entity flyout\n7. Click _Add to chat_: click on expand details -> risk contribution to\nsee the button\n8. Confirm that the Agent Builder sidebar is visible and the resize\nhandle on the sidebar's left edge is visible and draggable\n\n### Before\n\n<img width=\"1917\" height=\"842\" alt=\"Screenshot 2026-05-01 at 5 08 58 PM\"\nsrc=\"https://github.com/user-attachments/assets/1deaa2f3-b753-4092-9fc9-ade31879f3f3\"\n/>\n\n### After\n\n\nhttps://github.com/user-attachments/assets/829a60fc-80cc-4318-98a8-a69a65a4f89e","sha":"083666ed433da868f10af3c2d780c9f65d84f232"}},"sourceBranch":"main","suggestedTargetBranches":["9.4"],"targetPullRequestStates":[{"branch":"main","label":"v9.5.0","branchLabelMappingKey":"^v9.5.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/267339","number":267339,"mergeCommit":{"message":"Fix data grid full screen stacking (#267339)\n\n## Summary\nWhen entering full-screen mode on the entities table and opening the\nAgent Builder chat, the chant sidebar and its resize handle were hidden\nbehind the DataGrid overlay but still account for when positioning the\nflyout\n\n- `use_full_screen_watcher.ts` + `layout_sidebar.tsx`: introduced a\n`data-kbn-preserve-zindex` attribute to exclude elements from the\nfull-screen z-index reset. This is added to the Chrome sidebar to\npreserve its stacking context\n- `grid_global_app_style.tsx`: added a constrain to the grid's right\nedge (_var(--kbn-layout--sidebar-width)_), so the full-screen DataGrid\nno longer covers the sidebar column when the Agent Builder chat is open\n\n## How to test\n\n1. Start Elasticsearch locally\n2. Start Kibana locally\n <details>\n <summary>feature flags used</summary>\n \n uiSettings:\n overrides:\n agentBuilder:experimentalFeatures: true\n securitySolution:entityStoreEnableV2: true\n \n xpack.securitySolution.enableExperimental:\n - entityAnalyticsEntityStoreV2\n - entityAnalyticsNewHomePageEnabled\n </details>\n3. Add at least one entity to test\n <details>\n <summary>Kibana Dev Tools</summary>\n\n POST .entities.v2.latest.security_default-00001/_doc\n {\n \"@timestamp\": \"2026-05-01T12:00:00.000Z\",\n \"user\": { \"name\": \"test.user\" },\n \"entity\": {\n \"name\": \"test.user\",\n \"type\": \"Identity\",\n \"id\": \"user:test.user\",\n\"EngineMetadata\": { \"Type\": \"user\", \"UntypedId\": \"test.user\" }\n }\n }\n </details>\n4. Navigate to Security → Entity Analytics\n5. Scroll to the entities table and click the full-screen icon\n6. Click any entity row to open the entity flyout\n7. Click _Add to chat_: click on expand details -> risk contribution to\nsee the button\n8. Confirm that the Agent Builder sidebar is visible and the resize\nhandle on the sidebar's left edge is visible and draggable\n\n### Before\n\n<img width=\"1917\" height=\"842\" alt=\"Screenshot 2026-05-01 at 5 08 58 PM\"\nsrc=\"https://github.com/user-attachments/assets/1deaa2f3-b753-4092-9fc9-ade31879f3f3\"\n/>\n\n### After\n\n\nhttps://github.com/user-attachments/assets/829a60fc-80cc-4318-98a8-a69a65a4f89e","sha":"083666ed433da868f10af3c2d780c9f65d84f232"}},{"branch":"9.4","label":"v9.4.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: tcalopes <tatiana.lopes@elastic.co>
ersin-erdal
pushed a commit
to ersin-erdal/kibana
that referenced
this pull request
May 6, 2026
## Summary
When entering full-screen mode on the entities table and opening the
Agent Builder chat, the chant sidebar and its resize handle were hidden
behind the DataGrid overlay but still account for when positioning the
flyout
- `use_full_screen_watcher.ts` + `layout_sidebar.tsx`: introduced a
`data-kbn-preserve-zindex` attribute to exclude elements from the
full-screen z-index reset. This is added to the Chrome sidebar to
preserve its stacking context
- `grid_global_app_style.tsx`: added a constrain to the grid's right
edge (_var(--kbn-layout--sidebar-width)_), so the full-screen DataGrid
no longer covers the sidebar column when the Agent Builder chat is open
## How to test
1. Start Elasticsearch locally
2. Start Kibana locally
<details>
<summary>feature flags used</summary>
uiSettings:
overrides:
agentBuilder:experimentalFeatures: true
securitySolution:entityStoreEnableV2: true
xpack.securitySolution.enableExperimental:
- entityAnalyticsEntityStoreV2
- entityAnalyticsNewHomePageEnabled
</details>
3. Add at least one entity to test
<details>
<summary>Kibana Dev Tools</summary>
POST .entities.v2.latest.security_default-00001/_doc
{
"@timestamp": "2026-05-01T12:00:00.000Z",
"user": { "name": "test.user" },
"entity": {
"name": "test.user",
"type": "Identity",
"id": "user:test.user",
"EngineMetadata": { "Type": "user", "UntypedId": "test.user" }
}
}
</details>
4. Navigate to Security → Entity Analytics
5. Scroll to the entities table and click the full-screen icon
6. Click any entity row to open the entity flyout
7. Click _Add to chat_: click on expand details -> risk contribution to
see the button
8. Confirm that the Agent Builder sidebar is visible and the resize
handle on the sidebar's left edge is visible and draggable
### Before
<img width="1917" height="842" alt="Screenshot 2026-05-01 at 5 08 58 PM"
src="https://github.com/user-attachments/assets/1deaa2f3-b753-4092-9fc9-ade31879f3f3"
/>
### After
https://github.com/user-attachments/assets/829a60fc-80cc-4318-98a8-a69a65a4f89e
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
When entering full-screen mode on the entities table and opening the Agent Builder chat, the chant sidebar and its resize handle were hidden behind the DataGrid overlay but still account for when positioning the flyout
use_full_screen_watcher.ts+layout_sidebar.tsx: introduced adata-kbn-preserve-zindexattribute to exclude elements from the full-screen z-index reset. This is added to the Chrome sidebar to preserve its stacking contextgrid_global_app_style.tsx: added a constrain to the grid's right edge (var(--kbn-layout--sidebar-width)), so the full-screen DataGrid no longer covers the sidebar column when the Agent Builder chat is openHow to test
Start Elasticsearch locally
Start Kibana locally
feature flags used
Add at least one entity to test
Kibana Dev Tools
Navigate to Security → Entity Analytics
Scroll to the entities table and click the full-screen icon
Click any entity row to open the entity flyout
Click Add to chat: click on expand details -> risk contribution to see the button
Confirm that the Agent Builder sidebar is visible and the resize handle on the sidebar's left edge is visible and draggable
Before
After
Screen.Recording.2026-05-01.at.4.56.21.PM.mov