diff --git a/app/client/components/GridView.css b/app/client/components/GridView.css index 6f270bc5..dd99f6a1 100644 --- a/app/client/components/GridView.css +++ b/app/client/components/GridView.css @@ -235,7 +235,6 @@ width: 0px; /* Matches rowid width (+border) */ height: 100%; z-index: 3; - left: calc(4rem); border-right: 1px solid var(--grist-color-dark-grey) !important; user-select: none; pointer-events: none diff --git a/app/client/components/GridView.js b/app/client/components/GridView.js index 01966810..57b8ac93 100644 --- a/app/client/components/GridView.js +++ b/app/client/components/GridView.js @@ -924,7 +924,13 @@ GridView.prototype.buildDom = function() { dom('div.frozen_line', kd.show(this.frozenLine)), dom('div.gridview_header_backdrop_left'), //these hide behind the actual headers to keep them from flashing dom('div.gridview_header_backdrop_top'), - dom('div.gridview_left_border'), //these hide behind the actual headers to keep them from flashing + // When there are frozen columns, right border for number row will not be visible (as actually there is no border, + // it comes from the first cell in the grid) making a gap between row-number and actual column. So when we scroll + // the content of the scrolled columns will be visible to the user (as there is blank space there). + // This line fills the gap. NOTE that we are using number here instead of a boolean. + dom('div.gridview_left_border', kd.show(this.numFrozen), + kd.style("left", ROW_NUMBER_WIDTH + 'px') + ), // left shadow that will be visible on top of frozen columns dom('div.scroll_shadow_frozen', kd.show(this.frozenShadow)), // When cursor leaves the GridView, remove hover immediately (without debounce). diff --git a/app/client/components/viewCommon.css b/app/client/components/viewCommon.css index 911eaa91..ed8c391e 100644 --- a/app/client/components/viewCommon.css +++ b/app/client/components/viewCommon.css @@ -75,6 +75,10 @@ color: var(--grist-actual-cell-color, black); } +.field.selected .field_clip { + mix-blend-mode: darken; +} + .field_clip.invalid, .field_clip.field-error-from-style { background-color: #ffb6c1; color: black;