[8.x] [EDR Workflows] Fix navigation not opening on Response Console …

…view (elastic#195907) (elastic#196134)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[EDR Workflows] Fix navigation not opening on Response Console view
(elastic#195907)](elastic#195907)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Konrad
Szwarc","email":"konrad.szwarc@elastic.co"},"sourceCommit":{"committedDate":"2024-10-14T12:58:15Z","message":"[EDR
Workflows] Fix navigation not opening on Response Console view
(elastic#195907)\n\nThe Response Console is a full-size overlay rather than a
modal or page.\r\nIn the Serverless environment, we need to account for
the space taken up\r\nby the navigation on the left when it’s open as
well as closed. To\r\naccommodate this, we’ll subtract the navigation
width (defined by the\r\n`--euiCollapsibleNavOffset` variable) from the
overlay width and apply\r\nit as a left offset.\r\n\r\nThe
`--euiCollapsibleNavOffset` variable is only declared for\r\nServerless,
so these changes will not affect ESS, where navigation is\r\ndisplayed
as a popup rather than being integrated into the page
layout.\r\n\r\nWith these
changes:\r\nServerless:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/81955598-6ff1-4856-af08-ca5e9548a85c\r\n\r\nESS:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0bec1e24-58f6-45be-b846-feece89ecb63","sha":"2ce924b93f289b043920e5cd4a60d71d2b295bae","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Defend
Workflows","v8.16.0","backport:version"],"title":"[EDR Workflows] Fix
navigation not opening on Response Console
view","number":195907,"url":"https://github.com/elastic/kibana/pull/195907","mergeCommit":{"message":"[EDR
Workflows] Fix navigation not opening on Response Console view
(elastic#195907)\n\nThe Response Console is a full-size overlay rather than a
modal or page.\r\nIn the Serverless environment, we need to account for
the space taken up\r\nby the navigation on the left when it’s open as
well as closed. To\r\naccommodate this, we’ll subtract the navigation
width (defined by the\r\n`--euiCollapsibleNavOffset` variable) from the
overlay width and apply\r\nit as a left offset.\r\n\r\nThe
`--euiCollapsibleNavOffset` variable is only declared for\r\nServerless,
so these changes will not affect ESS, where navigation is\r\ndisplayed
as a popup rather than being integrated into the page
layout.\r\n\r\nWith these
changes:\r\nServerless:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/81955598-6ff1-4856-af08-ca5e9548a85c\r\n\r\nESS:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0bec1e24-58f6-45be-b846-feece89ecb63","sha":"2ce924b93f289b043920e5cd4a60d71d2b295bae"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195907","number":195907,"mergeCommit":{"message":"[EDR
Workflows] Fix navigation not opening on Response Console view
(elastic#195907)\n\nThe Response Console is a full-size overlay rather than a
modal or page.\r\nIn the Serverless environment, we need to account for
the space taken up\r\nby the navigation on the left when it’s open as
well as closed. To\r\naccommodate this, we’ll subtract the navigation
width (defined by the\r\n`--euiCollapsibleNavOffset` variable) from the
overlay width and apply\r\nit as a left offset.\r\n\r\nThe
`--euiCollapsibleNavOffset` variable is only declared for\r\nServerless,
so these changes will not affect ESS, where navigation is\r\ndisplayed
as a popup rather than being integrated into the page
layout.\r\n\r\nWith these
changes:\r\nServerless:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/81955598-6ff1-4856-af08-ca5e9548a85c\r\n\r\nESS:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0bec1e24-58f6-45be-b846-feece89ecb63","sha":"2ce924b93f289b043920e5cd4a60d71d2b295bae"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Konrad Szwarc <konrad.szwarc@elastic.co>

x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx

@@ -27,9 +27,12 @@ const OverlayRootContainer = styled.div`
   top: var(--euiFixedHeadersOffset, 0);
   bottom: 0;
   right: 0;
+  left: var(--euiCollapsibleNavOffset, 0);
 
+  width: calc(100% - var(--euiCollapsibleNavOffset, 0));
   height: calc(100% - var(--euiFixedHeadersOffset, 0));
-  width: 100%;
+
+  border-left: 1px solid ${({ theme: { eui } }) => eui.euiColorLightestShade};
 
   z-index: ${({ theme: { eui } }) =>
     eui.euiZFlyout +