diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx index 39bf034f1b21b..2127845f88b13 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx +++ b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx @@ -27,10 +27,11 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean) ${isEditMode ? editModeOutline : viewModeOutline} ); + display: inline-block; container: hoverActionsAnchor / inline-size; border-radius: ${euiTheme.border.radius.medium}; position: relative; - display: inline-block; + vertical-align: top; width: 100%; height: 100%; @@ -41,9 +42,19 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean) } ` : css` + .embPanel { + outline: 1px solid transparent; // necessary for outline-color transition + z-index: ${euiTheme.levels.content}; // necessary for z-index transition + // delay hiding border on hover out to match delay on hover actions + transition: outline-color ${euiTheme.animation.extraFast}, + z-index ${euiTheme.animation.extraFast}; + transition-delay: ${euiTheme.animation.fast}; + } + &:hover .embPanel { outline: var(--internalBorderStyle); z-index: ${euiTheme.levels.menu}; + transition: none; // apply transition on hover out only } `} @@ -55,9 +66,9 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean) visibility: hidden; // delay hiding hover actions to make grabbing the drag handle easier - transition: ${euiTheme.animation.extraFast} opacity ease-in, - ${euiTheme.animation.extraFast} z-index linear, - ${euiTheme.animation.extraFast} visibility linear; + transition: opacity ${euiTheme.animation.extraFast} ease-in, + z-index ${euiTheme.animation.extraFast} linear, + visibility ${euiTheme.animation.extraFast} linear; transition-delay: ${euiTheme.animation.fast}; } diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx index 986c9f4e92a52..f3885d2e3ffc7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx @@ -28,6 +28,7 @@ export const MetricItem = styled(EuiFlexItem)` &.euiFlexItem { flex-basis: 0; flex-grow: 0; + min-width: 100px; } `; MetricItem.displayName = 'MetricItem'; diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/explore/inspect/inspect_button.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/explore/inspect/inspect_button.cy.ts index b0269565cb317..a9025ba319acd 100644 --- a/x-pack/test/security_solution_cypress/cypress/e2e/explore/inspect/inspect_button.cy.ts +++ b/x-pack/test/security_solution_cypress/cypress/e2e/explore/inspect/inspect_button.cy.ts @@ -25,8 +25,7 @@ import { mockRiskEngineEnabled } from '../../../tasks/entity_analytics'; const DATA_VIEW = 'auditbeat-*'; -// Failing: See https://github.com/elastic/kibana/issues/178367 -describe.skip('Inspect Explore pages', { tags: ['@ess', '@serverless'] }, () => { +describe('Inspect Explore pages', { tags: ['@ess', '@serverless'] }, () => { beforeEach(() => { // illegal_argument_exception: unknown setting [index.lifecycle.name] cy.task('esArchiverLoad', { archiveName: 'risk_scores_new' });