[RAC][Observability] fix flyout in fullscreen mode

elastic · Aug 16, 2021 · 826e51d · 826e51d
1 parent 9fa62bf
commit 826e51d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/index.tsx b/x-pack/plugins/observability/public/pages/alerts/index.tsx
@@ -27,6 +27,7 @@ import { AlertsTableTGrid } from './alerts_table_t_grid';
 import { StatusFilter } from './status_filter';
 import { useFetcher } from '../../hooks/use_fetcher';
 import { callObservabilityApi } from '../../services/call_observability_api';
+import './styles.scss';
 
 export interface TopAlert {
   fields: ParsedTechnicalFields;

diff --git a/x-pack/plugins/observability/public/pages/alerts/styles.scss b/x-pack/plugins/observability/public/pages/alerts/styles.scss
@@ -0,0 +1,12 @@
+$full_screen_flyout_top: 72px;
+.kbnBody.euiBody--headerIsFixed.euiDataGrid__restrictBody {
+  .euiOverlayMask--belowHeader {
+    top: $full_screen_flyout_top;
+  }
+
+  .euiFlyout, 
+  .euiCollapsibleNav {
+    top: $full_screen_flyout_top;
+    height: calc(100% - #{$full_screen_flyout_top});
+  }
+}