From 26624004d6b84bb9d9f828ae847a432a6e18eb06 Mon Sep 17 00:00:00 2001
From: Angela Chuang <6295984+angorayc@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:41:29 +0100
Subject: [PATCH] [SecuritySolution] Styling for embeddable (#162134)

## Summary


Metrics and histograms on Hosts, network, users, rules and alerts page
are cropped.


Before:

<img width="784" alt="Screenshot 2023-07-18 at 12 40 52"
src="https://github.com/elastic/kibana/assets/6295984/56ade48c-03dd-4095-a3e6-c87b2de895ad">



After:

<img width="766" alt="Screenshot 2023-07-18 at 12 38 48"
src="https://github.com/elastic/kibana/assets/6295984/e0c37138-e043-4075-8842-b7ace669d163">
---
 .../visualization_actions/lens_embeddable.tsx          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 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 27acaa6c17059..eadf94552794e 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
@@ -39,9 +39,13 @@ const LensComponentWrapper = styled.div<{
   width: ${({ width }) => width ?? 'auto'};
 
   ${({ $addHoverActionsPadding }) =>
-    $addHoverActionsPadding
-      ? `.embPanel__header--floater { top: ${HOVER_ACTIONS_PADDING * -1}px; }`
-      : ''}
+    $addHoverActionsPadding ? `.embPanel__header { top: ${HOVER_ACTIONS_PADDING * -1}px; }` : ''}
+
+  .embPanel__header {
+    z-index: 2;
+    position: absolute;
+    right: 0;
+  }
 
   .expExpressionRenderer__expression {
     padding: 2px 0 0 0 !important;