fix(styling): Grid Menu & Col Picker overflow in Firefox (#845)

- remove overflow-x for all browsers, we don't need a scroll to show at any point in time for the x coordinate
- Firefox has issues when overflow (auto) shows the scroll, it shows up over the text while Chrome seems to add necessary padding to avoid that problem, so we can add a fixed right padding for Firefox only, we don't want to make it too wide because that would look funny

packages/common/src/styles/_variables.scss

@@ -296,6 +296,7 @@ $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-divider-width:                         100% !default;
 $slick-column-picker-item-border:                           1px solid transparent !default;
 $slick-column-picker-item-border-radius:                    0px !default;
@@ -356,6 +357,7 @@ $slick-menu-item-hover-border:                              1px solid #d5d5d5 !d
 $slick-menu-item-hover-color:                               #fafafa !default;
 $slick-menu-item-padding:                                   2px 6px !default;
 $slick-menu-item-width:                                     100% !default;
+$slick-menu-item-white-space:                               nowrap !default;
 $slick-menu-icon-font-size:                                 $slick-icon-font-size !default;
 $slick-menu-icon-line-height:                               calc(#{$slick-menu-icon-font-size} + 2px) !default;
 $slick-menu-item-width-when-button:                         calc(100% - #{$slick-menu-close-btn-width}) !default;
@@ -365,6 +367,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-title-container-display:                        flex !default;
 $slick-menu-title-container-align-items:                    flex-start !default;
 $slick-menu-title-container-justify-content:                flex-end !default;
@@ -797,6 +800,7 @@ $slick-pagination-page-input-bgcolor:                       #fafbed !default;
 $slick-pagination-page-input-height:                        26px !default;
 $slick-pagination-page-input-width:                         50px !default;
 $slick-pagination-page-input-padding:                       2px !default;
+$slick-pagination-page-select-bg-color:                     #fff !default;
 $slick-pagination-page-select-border-radius:                3px !default;
 $slick-pagination-page-select-padding:                      0 0 2px 2px !default;
 $slick-pagination-page-select-height:                       32px !default;

packages/common/src/styles/slick-component.scss

@@ -204,6 +204,7 @@
     padding: 2px;
 
     select {
+      background-color: var(--slick-pagination-page-select-bg-color, $slick-pagination-page-select-bg-color);
       font-size: var(--slick-pagination-page-select-font-size, $slick-pagination-page-select-font-size);
       line-height: 1.5;
       height: var(--slick-pagination-page-select-height, $slick-pagination-page-select-height);

packages/common/src/styles/slick-plugins.scss

@@ -14,7 +14,8 @@ li.hidden {
   cursor: default;
   list-style-type: none;
   position: absolute;
-	overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   resize: both;
   width: max-content;
   font-family: var(--slick-font-family, $slick-font-family);
@@ -23,6 +24,10 @@ li.hidden {
   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 */
+    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);
   z-index: var(--slick-column-picker-z-index, $slick-column-picker-z-index);
 
@@ -265,6 +270,7 @@ li.hidden {
     list-style: none outside none;
     padding: var(--slick-menu-item-padding, $slick-menu-item-padding);
     width: var(--slick-menu-item-width, $slick-menu-item-width);
+    white-space: var(--slick-menu-item-white-space, $slick-menu-item-white-space);
 
     &:hover {
       border: var(--slick-menu-item-hover-border, $slick-menu-item-hover-border);
@@ -338,10 +344,15 @@ li.hidden {
   border-radius: var(--slick-menu-border-radius, $slick-menu-border-radius);
   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 */
+    padding: var(--slick-menu-padding-firefox, $slick-menu-padding-firefox);
+  }
   z-index: 100000;
   cursor: default;
   display: inline-block;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   resize: both;
 
   /* make sure that other UI frameworks aren't overriding our properties (Bulma was one of them affecting this) */