mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[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:
parent
851abb502f
commit
ccb391c826
2 changed files with 13 additions and 8 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue