From 52a954b9839b490c1439019a6b683097d1091a79 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 22 Dec 2022 15:02:17 -0500 Subject: [PATCH] fix(styling): make Grid Menu item full width instead of max-content --- packages/common/src/styles/_variables.scss | 7 +++--- packages/common/src/styles/slick-plugins.scss | 22 +++++++++++++++---- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 8b423207d..8592ac636 100644 --- 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 index c9fe86066..83575b02b 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -17,7 +17,6 @@ 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); @@ -25,7 +24,7 @@ li.hidden { 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;