Frozen columns are shifted even if no scrolling is possible

[puehringer]

• Release number or git hash: v1.1.2
• Web browser version and OS: Chrome v76.0.3809.87

Steps to reproduce

1. Set disableFrozenColumns: false in your LineUpFlags configuration
2. Set a column to frozen
3. Make sure your ranking does not scroll horizontally

Observed behavior

Even if the ranking is not shifted (no le-shifted class), the shift per column style is applied if they are frozen. The frozen columns are implemented by setting left: ...px, which only works because le-shifted is active on the main lineup engine, as the style position: sticky; is applied to the column. If le-shifted is not present, the left: ...px is still applied, offsetting the column even if no shift is required. This causes a hiding of the column behind the others if no scroll is possible/the scrollbar is on the very left.

Additionally, it seems that the margin of 5px which is usually applied to separate each column is not included in the calculation.

Expected behavior

• Apply the left: ...px only if le-shifted is present.

Possible Solution

The following lines cause the issue (I think): https://github.com/lineupjs/lineupengine/blob/v2.1.0/src/style/GridStyleManager.ts#L165-L173

When calling this.updateRule, one could prepend the CSS selector for le-shifted, such that this rule only applies if it is present. This would cause the left: ...px to not apply on non-shifted rankings.

[puehringer]

For now, I fixed it in my app by applying this style:

.lineup-engine:not(.le-shifted) .lu-header.frozen {
  left: 0px !important;
}

[puehringer]

For lineup#v4, the CSS class was renamed:

.lineup-engine:not(.le-shifted) .lu-header.le-frozen {
  left: 0px !important;
}