[Observability][SecuritySolution] Fix to prevent observability style …

…conflict in flyout across plugins (#138091) * fix to prevent style conflict in flyouts from diff. plugins * remove unnecessary class token (cherry picked from commit 3aa0599)
elastic · Aug 10, 2022 · 29ce9ae · 29ce9ae
1 parent 3d782db
commit 29ce9ae
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout.tsx b/x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout.tsx
@@ -45,7 +45,7 @@ export function AlertsFlyout({
   }
 
   return (
-    <EuiFlyout onClose={onClose} size="s" data-test-subj="alertsFlyout">
+    <EuiFlyout className="oblt__flyout" onClose={onClose} size="s" data-test-subj="alertsFlyout">
       <EuiFlyoutHeader hasBorder>
         <AlertsFlyoutHeader alert={alertData} />
       </EuiFlyoutHeader>

diff --git a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss b/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss
@@ -4,7 +4,7 @@ $fullscreenFlyoutTop: 72px;
     top: $fullscreenFlyoutTop;
   }
 
-  .euiFlyout,
+  .euiFlyout.oblt__flyout,
   .euiCollapsibleNav {
     top: $fullscreenFlyoutTop;
     height: calc(100% - #{$fullscreenFlyoutTop});

diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx
@@ -219,6 +219,7 @@ export function OverviewPage() {
       </>
       {isFlyoutVisible && (
         <EuiFlyout
+          className="oblt__flyout"
           size="s"
           ownFocus
           onClose={() => setIsFlyoutVisible(false)}