From 494a1dfed36ea7cb7b050e833ecfacb6bda21a85 Mon Sep 17 00:00:00 2001
From: Angela Chuang <6295984+angorayc@users.noreply.github.com>
Date: Fri, 1 Nov 2024 16:45:16 +0000
Subject: [PATCH] [SecuritySolution] Fix styling issues for visualizations
 (#198410)

## Summary

Fixes: https://github.com/elastic/kibana/issues/198370

**Before** - The was an unexpected outline for each visualization.

![Screenshot 2024-10-30 at 14 50
08](https://github.com/user-attachments/assets/84565278-ef4c-438c-8ae6-138588aca3d7)

**After** - Overriding the style to avoid unexpected styling changed.

<img width="2555" alt="Screenshot 2024-10-30 at 17 28 38"
src="https://github.com/user-attachments/assets/3116a798-c859-4543-a732-ebf1ff556c68">




https://github.com/user-attachments/assets/b19ec64e-1fa0-475a-9c14-9c0e237b8f95
---
 .../visualization_actions/lens_embeddable.tsx | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
index a72675d381404..0461cb8888be5 100644
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
@@ -34,24 +34,26 @@ import { useEmbeddableInspect } from './use_embeddable_inspect';
 import { useVisualizationResponse } from './use_visualization_response';
 import { useInspect } from '../inspect/use_inspect';
 
-const HOVER_ACTIONS_PADDING = 24;
 const DISABLED_ACTIONS = ['ACTION_CUSTOMIZE_PANEL'];
 
 const LensComponentWrapper = styled.div<{
   $height?: number;
   width?: string | number;
-  $addHoverActionsPadding?: boolean;
 }>`
   height: ${({ $height }) => ($height ? `${$height}px` : 'auto')};
   width: ${({ width }) => width ?? 'auto'};
 
-  ${({ $addHoverActionsPadding }) =>
-    $addHoverActionsPadding ? `.embPanel__header { top: ${HOVER_ACTIONS_PADDING * -1}px; }` : ''}
+  .embPanel {
+    outline: none;
+  }
+
+  .embPanel__hoverActions.embPanel__hoverActionsRight {
+    border-radius: 6px !important;
+    border-bottom: 1px solid #d3dae6 !important;
+  }
 
-  .embPanel__header {
-    z-index: 2;
-    position: absolute;
-    right: 0;
+  .embPanel__hoverActionsAnchor .embPanel__hoverActionsWrapper {
+    top: -20px;
   }
 
   .expExpressionRenderer__expression {
@@ -110,10 +112,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
     title: '',
   });
   const preferredSeriesType = (attributes?.state?.visualization as XYState)?.preferredSeriesType;
-  // Avoid hover actions button overlaps with its chart
-  const addHoverActionsPadding =
-    attributes?.visualizationType !== 'lnsLegacyMetric' &&
-    attributes?.visualizationType !== 'lnsPie';
+
   const LensComponent = lens.EmbeddableComponent;
 
   const overrides: TypedLensByValueInput['overrides'] = useMemo(
@@ -255,11 +254,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
   return (
     <>
       {attributes && searchSessionId && (
-        <LensComponentWrapper
-          $height={wrapperHeight}
-          width={wrapperWidth}
-          $addHoverActionsPadding={addHoverActionsPadding}
-        >
+        <LensComponentWrapper $height={wrapperHeight} width={wrapperWidth}>
           <LensComponent
             attributes={attributes}
             disabledActions={DISABLED_ACTIONS}