mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 02:09:32 -04:00
Fix Elastic Security Assistant - system prompt tooltip (#160957)
issue: https://github.com/elastic/security-team/issues/6969 ## Summary Because we have multiple popovers inside each other and every popover adds 2000 z-index to the target, the popover was higher than the default tooltip z-index. This change fixes it by setting the popover z-index. ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
This commit is contained in:
parent
ec620e7fb3
commit
977a8b657b
1 changed files with 4 additions and 0 deletions
|
@ -17,6 +17,7 @@ import {
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import React, { useCallback, useMemo, useState } from 'react';
|
import React, { useCallback, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
import { euiThemeVars } from '@kbn/ui-theme';
|
||||||
import { Conversation } from '../../../../..';
|
import { Conversation } from '../../../../..';
|
||||||
import { getOptions } from '../helpers';
|
import { getOptions } from '../helpers';
|
||||||
import * as i18n from '../translations';
|
import * as i18n from '../translations';
|
||||||
|
@ -149,6 +150,9 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<EuiSuperSelect
|
<EuiSuperSelect
|
||||||
|
// Limits popover z-index to prevent it from getting too high and covering tooltips.
|
||||||
|
// If the z-index is not defined, when a popover is opened, it sets the target z-index + 2000
|
||||||
|
popoverProps={{ zIndex: euiThemeVars.euiZLevel8 }}
|
||||||
data-test-subj="promptSuperSelect"
|
data-test-subj="promptSuperSelect"
|
||||||
fullWidth={fullWidth}
|
fullWidth={fullWidth}
|
||||||
hasDividers
|
hasDividers
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue