[8.10] [Security Solution][Investigations] - Fixes vertical scroll in expandable flyout (#164875) (#164890)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution][Investigations] - Fixes vertical scroll in
expandable flyout
(#164875)](https://github.com/elastic/kibana/pull/164875)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Michael
Olorunnisola","email":"michael.olorunnisola@elastic.co"},"sourceCommit":{"committedDate":"2023-08-25T18:42:50Z","message":"[Security
Solution][Investigations] - Fixes vertical scroll in expandable flyout
(#164875)","sha":"6a23607fc4a944eb4bb8a9e672dbbb7aa02960ab","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat
Hunting:Investigations","v8.10.0","v8.11.0"],"number":164875,"url":"https://github.com/elastic/kibana/pull/164875","mergeCommit":{"message":"[Security
Solution][Investigations] - Fixes vertical scroll in expandable flyout
(#164875)","sha":"6a23607fc4a944eb4bb8a9e672dbbb7aa02960ab"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164875","number":164875,"mergeCommit":{"message":"[Security
Solution][Investigations] - Fixes vertical scroll in expandable flyout
(#164875)","sha":"6a23607fc4a944eb4bb8a9e672dbbb7aa02960ab"}}]}]
BACKPORT-->

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>
This commit is contained in:
Kibana Machine 2023-08-25 16:03:35 -04:00 committed by GitHub
parent 851abb502f
commit ccb391c826
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 8 deletions

View file

@ -7,7 +7,7 @@
*/
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import React, { useMemo } from 'react';
import { LEFT_SECTION } from './test_ids';
interface LeftSectionProps {
@ -25,8 +25,12 @@ interface LeftSectionProps {
* Left section of the expanded flyout rendering a panel
*/
export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => {
const style = useMemo<React.CSSProperties>(
() => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }),
[width]
);
return (
<EuiFlexItem grow data-test-subj={LEFT_SECTION} style={{ width: `${width * 100}%` }}>
<EuiFlexItem grow data-test-subj={LEFT_SECTION} style={style}>
<EuiFlexGroup direction="column">{component}</EuiFlexGroup>
</EuiFlexItem>
);

View file

@ -7,7 +7,7 @@
*/
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import React, { useMemo } from 'react';
import { RIGHT_SECTION } from './test_ids';
interface RightSectionProps {
@ -28,12 +28,13 @@ export const RightSection: React.FC<RightSectionProps> = ({
component,
width,
}: RightSectionProps) => {
const style = useMemo<React.CSSProperties>(
() => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }),
[width]
);
return (
<EuiFlexItem
grow={false}
style={{ height: '100%', width: `${width * 100}%` }}
data-test-subj={RIGHT_SECTION}
>
<EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION}>
<EuiFlexGroup direction="column">{component}</EuiFlexGroup>
</EuiFlexItem>
);