From 9dadf63bb5a3db22b8243df89e9a42a3194f8022 Mon Sep 17 00:00:00 2001
From: Viraj Sanghvi <virajs@amazon.com>
Date: Mon, 30 Sep 2024 18:28:34 -0700
Subject: [PATCH] fix: prevent overlay from overlapping new application header
 (#680)

(cherry picked from commit c0437330519feea8f2c1976ff8cd8678fa8096d8)
---
 CHANGELOG.md                                          | 1 +
 public/components/layer_config/layer_config_panel.tsx | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index edf900b5..7779fd8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Features
 ### Enhancements
 ### Bug Fixes
+* fix: prevent overlay from overlapping new application header
 ### Infrastructure
 ### Documentation
 ### Maintenance
diff --git a/public/components/layer_config/layer_config_panel.tsx b/public/components/layer_config/layer_config_panel.tsx
index 3ca42bdc..af351602 100644
--- a/public/components/layer_config/layer_config_panel.tsx
+++ b/public/components/layer_config/layer_config_panel.tsx
@@ -107,6 +107,9 @@ export const LayerConfigPanel = ({
       onClose={onClose}
       hideCloseButton={true}
       className="layerConfigPanel"
+      // Flyout starts to overlap app header under this breakpoint, likely need
+      // to convert this to a panel considering the new layout.
+      pushMinBreakpoint={1576}
     >
       <EuiFlyoutHeader hasBorder={true}>
         <EuiFlexGroup gutterSize="s" alignItems="center">