github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-18 23:21:39 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] Fix fold/unfold button in traces waterfall explorer not clickable (#216972)

Browse source 
## Summary

Fixes #216790

This PR fixes the z-indexes changed in the [emotion migration
PR](https://github.com/elastic/kibana/pull/204222/files#diff-1c8129b4d0bdfead8d9fef09ba4344527629cb71cb52e920739fa85f17b5b36e),
using the same value (2000) as before.
Also it uses EuiButtonIcon instead of EuiButtonEmpty and aligns its
content.

## Before

![image](https://github.com/user-attachments/assets/8742e9a6-0de3-4353-9f95-cf82feffe7c6)

## After

![image](https://github.com/user-attachments/assets/2b9765a1-d428-4198-a9d5-ae9064c51ed9)
This commit is contained in:
Sergi Romeu 2025-04-03 14:19:54 +02:00 • committed by GitHub
parent 8ff4a35ff0
commit cc4ed13cb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiButtonEmpty, EuiCallOut, useEuiTheme } from '@elastic/eui';
import { EuiButtonIcon, EuiCallOut, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
@ -122,16 +122,19 @@ export function Waterfall({
display: flex;
position: sticky;
top: var(--euiFixedHeadersOffset, 0);
z-index: ${euiTheme.levels.content};
z-index: ${euiTheme.levels.menu};
background-color: ${euiTheme.colors.emptyShade};
border-bottom: 1px solid ${euiTheme.colors.mediumShade};
`}
>
<EuiButtonEmpty
<EuiButtonIcon
data-test-subj="apmWaterfallButton"
size="m"
css={css`
position: absolute;
z-index: ${euiTheme.levels.content};
z-index: ${euiTheme.levels.menu};
padding: ${euiTheme.size.m};
width: auto;
`}
aria-label={i18n.translate('xpack.apm.waterfall.foldButton.ariaLabel', {
defaultMessage: 'Click to {isAccordionOpen} the waterfall',