From e9425392b2728c8e92fce3604e242957cc067aae Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Mon, 10 Jun 2024 09:21:06 -0400
Subject: [PATCH] fix(styling): Grid Menu, Col Picker labels should take full
 width (#1564)

* fix(styling): Grid Menu, Col Picker labels should take full width
- the Column Picker & Grid Menu, cols picker list labels were not center aligned and were also not taking full width

* chore: fix hidden class should always be set to display none
---
 packages/common/src/styles/slick-plugins.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 57d7bf6f3..484364148 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -8,7 +8,7 @@
 
 /** make sure the hidden class exist, it was removed in BS4 */
 li.hidden {
-  display: none;
+  display: none !important;
 }
 
 .slick-column-picker {
@@ -100,6 +100,9 @@ li.hidden {
   }
 
   li {
+    display: flex;
+		align-items: center;
+		width: 100%;
     color: var(--slick-menu-color, $slick-menu-color);
     border: var(--slick-column-picker-item-border, $slick-column-picker-item-border);
     border-radius: var(--slick-column-picker-item-border-radius, $slick-column-picker-item-border-radius);
@@ -115,6 +118,8 @@ li.hidden {
     }
     label {
       cursor: pointer;
+      height: 100%;
+			width: 100%;
       margin-bottom: 0px;
     }
   }
@@ -181,7 +186,7 @@ li.hidden {
     & + span.checkbox-label {
       display: inline-flex;
       align-items: center;
-      gap: 3px;
+      flex-grow: 1;
       padding-left: var(--slick-column-picker-label-text-padding-left, $slick-column-picker-label-text-padding-left);
     }
   }