[8.x] [SecuritySolution] Fix styling issues for visualizations (#198410…

…) (#198704)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[SecuritySolution] Fix styling issues for visualizations
(#198410)](#198410)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-01T16:45:16Z","message":"[SecuritySolution]
Fix styling issues for visualizations (#198410)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/198370\r\n\r\n**Before** - The
was an unexpected outline for each visualization.\r\n\r\n![Screenshot
2024-10-30 at 14
50\r\n08](https://github.com/user-attachments/assets/84565278-ef4c-438c-8ae6-138588aca3d7)\r\n\r\n**After**
- Overriding the style to avoid unexpected styling changed.\r\n\r\n<img
width=\"2555\" alt=\"Screenshot 2024-10-30 at 17 28
38\"\r\nsrc=\"https://github.com/user-attachments/assets/3116a798-c859-4543-a732-ebf1ff556c68\">\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b19ec64e-1fa0-475a-9c14-9c0e237b8f95","sha":"494a1dfed36ea7cb7b050e833ecfacb6bda21a85","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","v9.0.0","Team:Threat
Hunting:Explore","v8.17.0"],"title":"[SecuritySolution] Fix styling
issues for
visualizations","number":198410,"url":"https://github.com/elastic/kibana/pull/198410","mergeCommit":{"message":"[SecuritySolution]
Fix styling issues for visualizations (#198410)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/198370\r\n\r\n**Before** - The
was an unexpected outline for each visualization.\r\n\r\n![Screenshot
2024-10-30 at 14
50\r\n08](https://github.com/user-attachments/assets/84565278-ef4c-438c-8ae6-138588aca3d7)\r\n\r\n**After**
- Overriding the style to avoid unexpected styling changed.\r\n\r\n<img
width=\"2555\" alt=\"Screenshot 2024-10-30 at 17 28
38\"\r\nsrc=\"https://github.com/user-attachments/assets/3116a798-c859-4543-a732-ebf1ff556c68\">\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b19ec64e-1fa0-475a-9c14-9c0e237b8f95","sha":"494a1dfed36ea7cb7b050e833ecfacb6bda21a85"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198410","number":198410,"mergeCommit":{"message":"[SecuritySolution]
Fix styling issues for visualizations (#198410)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/198370\r\n\r\n**Before** - The
was an unexpected outline for each visualization.\r\n\r\n![Screenshot
2024-10-30 at 14
50\r\n08](https://github.com/user-attachments/assets/84565278-ef4c-438c-8ae6-138588aca3d7)\r\n\r\n**After**
- Overriding the style to avoid unexpected styling changed.\r\n\r\n<img
width=\"2555\" alt=\"Screenshot 2024-10-30 at 17 28
38\"\r\nsrc=\"https://github.com/user-attachments/assets/3116a798-c859-4543-a732-ebf1ff556c68\">\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b19ec64e-1fa0-475a-9c14-9c0e237b8f95","sha":"494a1dfed36ea7cb7b050e833ecfacb6bda21a85"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <[email protected]>

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}