…ning/closing left panel (elastic#210225)

## Summary

We recently improved the expandable flyout by adding support for a
[fully resizable flyout](elastic#192906).
This work introduce a minor inconvenience, where the right panel gets
re-rendered every time the user expands or collapses the flyout.

This PR fixes this issue by better using the EUI resizable container
(see how to externally control a resizable container
[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).
The flyout is now always showing a resizable container (even in
collapsed mode) but EUI manages internally hiding the left section and
the resize button.

#### Old behavior

https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44

#### New behavior

https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6

The rest of the flyout's behavior remains untouched:
- identical default widths
- user selected widths are still applied
- no changes to the preview behavior

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 7a9bf13)

# Conflicts:
#	x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.tsx

…ning/closing left panel (elastic#210225)

## Summary

We recently improved the expandable flyout by adding support for a
[fully resizable flyout](elastic#192906).
This work introduce a minor inconvenience, where the right panel gets
re-rendered every time the user expands or collapses the flyout.

This PR fixes this issue by better using the EUI resizable container
(see how to externally control a resizable container
[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).
The flyout is now always showing a resizable container (even in
collapsed mode) but EUI manages internally hiding the left section and
the resize button.

#### Old behavior

https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44

#### New behavior

https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6

The rest of the flyout's behavior remains untouched:
- identical default widths
- user selected widths are still applied
- no changes to the preview behavior

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 7a9bf13)

# Conflicts:
#	packages/kbn-expandable-flyout/src/components/resizable_container.tsx

…ning/closing left panel (elastic#210225)

## Summary

We recently improved the expandable flyout by adding support for a
[fully resizable flyout](elastic#192906).
This work introduce a minor inconvenience, where the right panel gets
re-rendered every time the user expands or collapses the flyout.

This PR fixes this issue by better using the EUI resizable container
(see how to externally control a resizable container
[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).
The flyout is now always showing a resizable container (even in
collapsed mode) but EUI manages internally hiding the left section and
the resize button.

#### Old behavior

https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44

#### New behavior

https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6

The rest of the flyout's behavior remains untouched:
- identical default widths
- user selected widths are still applied
- no changes to the preview behavior

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 7a9bf13)

…ning/closing left panel (elastic#210225)

## Summary

We recently improved the expandable flyout by adding support for a
[fully resizable flyout](elastic#192906).
This work introduce a minor inconvenience, where the right panel gets
re-rendered every time the user expands or collapses the flyout.

This PR fixes this issue by better using the EUI resizable container
(see how to externally control a resizable container
[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).
The flyout is now always showing a resizable container (even in
collapsed mode) but EUI manages internally hiding the left section and
the resize button.

#### Old behavior

https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44

#### New behavior

https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6

The rest of the flyout's behavior remains untouched:
- identical default widths
- user selected widths are still applied
- no changes to the preview behavior

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 7a9bf13)

# Conflicts:
#	packages/kbn-expandable-flyout/src/components/resizable_container.tsx

…hen opening/closing left panel (#210225) (#210291)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Security Solution][Expandable flyout] fix flyout flickering when
opening/closing left panel
(#210225)](#210225)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left
panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"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/210225","number":210225,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

…hen opening/closing left panel (#210225) (#210289)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Security Solution][Expandable flyout] fix flyout flickering when
opening/closing left panel
(#210225)](#210225)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left
panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"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/210225","number":210225,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

…hen opening/closing left panel (#210225) (#210288)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Security Solution][Expandable flyout] fix flyout flickering when
opening/closing left panel
(#210225)](#210225)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left
panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"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/210225","number":210225,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

…en opening/closing left panel (#210225) (#210287)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Security Solution][Expandable flyout] fix flyout flickering when
opening/closing left panel
(#210225)](#210225)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left
panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"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/210225","number":210225,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

…en opening/closing left panel (#210225) (#210292)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Expandable flyout] fix flyout flickering when
opening/closing left panel
(#210225)](#210225)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left
panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210287","number":210287,"state":"OPEN"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210288","number":210288,"state":"OPEN"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] fix flyout flickering when opening/closing
left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the
expandable flyout by adding support for a\r\n[fully resizable
flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work
introduce a minor inconvenience, where the right panel
gets\r\nre-rendered every time the user expands or collapses the
flyout.\r\n\r\nThis PR fixes this issue by better using the EUI
resizable container\r\n(see how to externally control a resizable
container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe
flyout is now always showing a resizable container (even in\r\ncollapsed
mode) but EUI manages internally hiding the left section and\r\nthe
resize button.\r\n\r\n#### Old
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n####
New
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe
rest of the flyout's behavior remains untouched:\r\n- identical default
widths\r\n- user selected widths are still applied\r\n- no changes to
the preview behavior\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210289","number":210289,"state":"OPEN"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210291","number":210291,"state":"OPEN"}]}]
BACKPORT-->