From b704a815e97c45d81f59421db36073a4db470981 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Wed, 19 Jun 2024 19:32:54 -0400
Subject: [PATCH] fix: Header Menu should be on top of grid not inside (#1033)

---
 src/slick.grid.ts                  |  1 -
 src/styles/_variables.scss         |  3 ++-
 src/styles/slick-alpine-theme.scss | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index a53bfa47..6da71003 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -681,7 +681,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     };
 
     Utils.emptyElement(this._container);
-    this._container.style.overflow = 'hidden';
     this._container.style.outline = String(0);
     this._container.classList.add(this.uid);
     this._container.classList.add('ui-widget');
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index a0257ac8..3b0a0efc 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -140,4 +140,5 @@ $alpine-menu-border:                              1px solid #babfc7 !default;
 $alpine-menu-border-radius:                       2px !default;
 $alpine-menu-box-shadow:                          none !default;
 $alpine-menu-close-btn-background:                transparent !default;
-$alpine-menu-close-btn-border:                    1px solid #babfc7 !default;
\ No newline at end of file
+$alpine-menu-close-btn-border:                    1px solid #babfc7 !default;
+$alpine-menu-content-margin:                      2px 4px !default;
\ No newline at end of file
diff --git a/src/styles/slick-alpine-theme.scss b/src/styles/slick-alpine-theme.scss
index 0c87751b..5c01faf4 100644
--- a/src/styles/slick-alpine-theme.scss
+++ b/src/styles/slick-alpine-theme.scss
@@ -542,6 +542,9 @@
 }
 
 .slick-header-menuitem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border: 1px solid transparent;
   list-style: none;
   margin: 0;
@@ -577,18 +580,19 @@
     }
   }
 
+  .slick-header-menucontent {
+    display: inline-block;
+    vertical-align: middle;
+    flex-grow: 1;
+    margin: var(--alpine-menu-content-margin, $alpine-menu-content-margin);
+    font-size: var(--alpine-font-size, $alpine-font-size);
+  }
+
   &:hover {
     border-color: var(--alpine-border-color, $alpine-border-color);
   }
 }
 
-.slick-header-menucontent {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 5px;
-  font-size: var(--alpine-font-size, $alpine-font-size);
-}
-
 .slick-pane {
   position: absolute;
   outline: 0;