fix(styling): make Grid Menu item full width instead of max-content (#…

…858)
ghiscoding · Dec 22, 2022 · 9c57365 · 9c57365
1 parent 064e75e
commit 9c57365
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -296,7 +296,8 @@ $slick-column-picker-close-btn-position-right:              5px !default;
 $slick-column-picker-close-btn-position-top:                0px !default;
 $slick-column-picker-min-width:                             150px !default;
 $slick-column-picker-padding:                               6px !default;
-$slick-column-picker-padding-firefox:                       6px 14px 6px 6px !default;
+$slick-column-picker-list-width-firefox:                    calc(100% + 12px) !default;
+$slick-column-picker-padding-firefox:                       6px 15px 6px 6px !default;
 $slick-column-picker-divider-width:                         100% !default;
 $slick-column-picker-item-border:                           1px solid transparent !default;
 $slick-column-picker-item-border-radius:                    0px !default;
@@ -310,7 +311,6 @@ $slick-column-picker-label-margin:                          4px !default;
 $slick-column-picker-label-font-weight:                     normal !default;
 $slick-column-picker-link-background-color:                 #ffffff !default;
 $slick-column-picker-list-margin-bottom:                    8px !default;
-$slick-column-picker-list-width:                            max-content !default;
 $slick-column-picker-title-border-bottom:                   1px solid #d6d6d6 !default;
 $slick-column-picker-title-font-size:                       calc(#{$slick-column-picker-item-font-size} + 2px) !default;
 $slick-column-picker-title-font-weight:                     normal !default;
@@ -326,6 +326,7 @@ $slick-grid-menu-link-background-color:                     #ffffff !default;
 $slick-grid-menu-icon-font-size:                            $slick-icon-font-size !default;
 $slick-grid-menu-icon-top-margin:                           5px !default;
 $slick-grid-menu-divider-width:                             calc(100% - 10px) !default;
+$slick-gri-menu-item-margin-right:                          6px !default;
 
 /* Menu Plugins */
 $slick-menu-bg-color:                                       #ffffff !default;
@@ -367,7 +368,7 @@ $slick-menu-line-height:                                    24px !default;
 $slick-menu-min-width:                                      140px !default;
 $slick-menu-option-list-margin-bottom:                      6px !default;
 $slick-menu-padding:                                        6px !default;
-$slick-menu-padding-firefox:                                6px 14px 6px 6px !default;
+$slick-menu-padding-firefox:                                6px 15px 6px 6px !default;
 $slick-menu-title-container-display:                        flex !default;
 $slick-menu-title-container-align-items:                    flex-start !default;
 $slick-menu-title-container-justify-content:                flex-end !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -17,15 +17,14 @@ li.hidden {
   overflow-x: hidden;
   overflow-y: auto;
   resize: both;
-  width: max-content;
   font-family: var(--slick-font-family, $slick-font-family);
   background-color: var(--slick-column-picker-background-color, $slick-column-picker-background-color);
   border: var(--slick-column-picker-border, $slick-column-picker-border);
   border-radius: var(--slick-column-picker-border-radius, $slick-column-picker-border-radius);
   min-width: var(--slick-column-picker-min-width, $slick-column-picker-min-width);
   padding: var(--slick-column-picker-padding, $slick-column-picker-padding);
   @-moz-document url-prefix() {
-    /* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */
+    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
     padding: var(--slick-column-picker-padding-firefox, $slick-column-picker-padding-firefox);
   }
   box-shadow: var(--slick-column-picker-box-shadow, $slick-column-picker-box-shadow);
@@ -90,7 +89,11 @@ li.hidden {
 }
 
 .slick-column-picker-list, .slick-grid-menu-list {
-  width: var(--slick-column-picker-list-width, $slick-column-picker-list-width);
+  white-space: nowrap;
+  @-moz-document url-prefix() {
+    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
+    width: var(--slick-column-picker-list-width-firefox, $slick-column-picker-list-width-firefox);
+  }
 
   li {
     border: var(--slick-column-picker-item-border, $slick-column-picker-item-border);
@@ -157,11 +160,22 @@ li.hidden {
 .slick-grid-menu {
   .slick-menu-command-list {
     margin-bottom: var(--slick-column-picker-list-margin-bottom, $slick-column-picker-list-margin-bottom);
+    @-moz-document url-prefix() {
+      /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
+      width: var(--slick-column-picker-list-width-firefox, $slick-column-picker-list-width-firefox);
+    }
   }
 
   li {
     list-style: none;
     background: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @-moz-document url-prefix() {
+      margin-right: var(--slick-gri-menu-item-margin-right, $slick-gri-menu-item-margin-right);
+      width: 100%;
+    }
+
     a {
       display: block;
       padding: 4px;
@@ -345,7 +359,7 @@ li.hidden {
   min-width: var(--slick-menu-min-width, $slick-menu-min-width);
   padding: var(--slick-menu-padding, $slick-menu-padding);
   @-moz-document url-prefix() {
-    /* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */
+    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
     padding: var(--slick-menu-padding-firefox, $slick-menu-padding-firefox);
   }
   z-index: 100000;