jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
109 stars 78 forks source link

Ag grid theme column menu is not scrollable depending on bundler #3581

Closed origami-z closed 1 week ago

origami-z commented 2 weeks ago

Package name(s)

AG Grid Theme (@salt-ds/ag-grid-theme)

Package version(s)

v1.4.1

Description

Column menu (click triple dot menu on column header, third column tab) is not scrollable, columns tool panel columns can not be scrolled to the bottom

Bundler Dev Prod
StackBlitz ok n/a
Salt site - bug
CRA v5 bug bug
Vite v5 ok ok

The problem is due to CSS minification, where flex 0px is being minified away.

/* ag-grid.css */
.ag-column-select-list {
  -webkit-box-flex: 1;
          flex: 1 1 0px;
  overflow: hidden;
}

Minified to:

.ag-column-select-list {
    flex: 1 1;
    overflow: hidden;
}

Potential fix

Remove below 2 sets of CSS. Additional vertical spacing needs to be adjusted before the search input and after the list.

.ag-theme-salt-high-compact-light .ag-column-select-list {
    overflow: initial;
}
.ag-theme-salt-high-compact-light .ag-menu-column-select-wrapper {
    height: 100%;
}

Operating system

Browser

Are you a JPMorgan Chase & Co. employee?

origami-z commented 1 week ago

Hotfix released - @salt-ds/ag-grid-theme@1.4.3 Confirmed not impacting v2