From 26cd1a53dfbbea34094cd840eb885a78f29d8de6 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Fri, 11 Oct 2024 18:37:25 +0200
Subject: [PATCH] Fix DualBrush positioning in embedded panels

---
 .../src/document_count_chart/document_count_chart.tsx      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
index 39291762b8fca..d9f68fe7ef890 100644
--- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
+++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@@ -426,7 +426,12 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
     <>
       {isBrushVisible && (
         <div className="aiopsHistogramBrushes" data-test-subj={'aiopsHistogramBrushes'}>
-          <div css={{ height: BADGE_HEIGHT }}>
+          {/**
+           * We need position:relative on this parent container of the BrushBadges,
+           * because of the absolute positioning of the BrushBadges. Without it, the
+           * BrushBadges would not be positioned correctly when used in embedded panels.
+           */}
+          <div css={{ height: BADGE_HEIGHT, position: 'relative' }}>
             <BrushBadge
               label={
                 baselineBrush.label ??