diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx
index dbc80df9d6..f9838ed8d4 100644
--- a/chrome/content/zotero/components/virtualized-table.jsx
+++ b/chrome/content/zotero/components/virtualized-table.jsx
@@ -1083,7 +1083,10 @@ class VirtualizedTable extends React.Component {
const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
const scrollbarWidth = Math.max(0,
tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
- header.style.width = `calc(100% - ${scrollbarWidth}px)`;
+ // Should be kept up to date with the _virtualized-table.scss value
+ // for .virtualized-table-header
+ const paddingInlineStart = 6;
+ header.style.width = `calc(100% - ${scrollbarWidth+paddingInlineStart}px)`;
}
/**
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index 925a445d93..f8fe165f31 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -3,249 +3,263 @@
// --------------------------------------------------
/**
-
-
-
+
+
+
*/
.virtualized-table-container {
- display: flex;
- height: 0;
- flex-direction: column;
- > div {
display: flex;
- flex: 1;
- background-color: -moz-field;
- overflow: hidden;
- position: relative;
- }
+ height: 0;
+ flex-direction: column;
+
+ > div {
+ display: flex;
+ flex: 1;
+ background-color: -moz-field;
+ overflow: hidden;
+ position: relative;
+ }
}
.virtualized-table, .drag-image-container {
- width: 100%;
- display: flex;
- flex-direction: column;
- position: relative;
-
- &:focus {
- outline: none;
- }
-
- &.resizing {
- cursor: col-resize;
- .cell {
- cursor: col-resize;
- }
- }
-
- .cell {
- min-width: 30px;
- cursor: default;
- white-space: nowrap;
- flex-grow: 1;
- flex-shrink: 1;
- box-sizing: border-box;
-
- &.primary {
- display: flex;
- align-items: center;
-
- :not(.cell-text) {
- flex-shrink: 0
- }
-
- .cell-text {
- flex-shrink: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- margin-inline-start: 6px;
- }
-
- .twisty + .cell-text, .spacer-twisty + .cell-text {
- margin-inline-start: 0;
- }
- }
-
- .cell-icon {
- min-width: 16px;
- }
- }
-
- .row {
- display: flex;
- flex-direction: row;
- align-items: center;
width: 100%;
- box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ position: relative;
- &.drop {
- color: $shade-0 !important;
- background: $shade-5 !important;
- * {
- pointer-events: none !important;
- }
+ &:focus {
+ outline: none;
}
- span.drop-before, span.drop-after {
- position: absolute;
- width: 20%;
- height: 1px;
- background-color: $shade-5;
- pointer-events: none;
- }
- span.drop-before {
- top: 0;
- }
- span.drop-after {
- bottom: -1px;
+ &.resizing {
+ cursor: col-resize;
+
+ .cell {
+ cursor: col-resize;
+ }
}
- &.selected:not(.highlighted) {
- background-color: highlight;
- color: highlighttext;
+ .cell {
+ min-width: 30px;
+ cursor: default;
+ white-space: nowrap;
+ flex-grow: 1;
+ flex-shrink: 1;
+ box-sizing: border-box;
+
+ &.primary {
+ display: flex;
+ align-items: center;
+
+ :not(.cell-text) {
+ flex-shrink: 0
+ }
+
+ .cell-text {
+ flex-shrink: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-inline-start: 6px;
+ }
+
+ .twisty + .cell-text, .spacer-twisty + .cell-text {
+ margin-inline-start: 0;
+ }
+ }
+
+ .cell-icon {
+ min-width: 16px;
+ }
}
- &.highlighted {
- background: #FFFF99;
+ .row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+
+ &.drop {
+ color: $shade-0 !important;
+ background: $shade-5 !important;
+
+ * {
+ pointer-events: none !important;
+ }
+ }
+
+ span.drop-before, span.drop-after {
+ position: absolute;
+ width: 20%;
+ height: 1px;
+ background-color: $shade-5;
+ pointer-events: none;
+ }
+
+ span.drop-before {
+ top: 0;
+ }
+
+ span.drop-after {
+ bottom: -1px;
+ }
+
+ &.selected:not(.highlighted) {
+ background-color: highlight;
+ color: highlighttext;
+ }
+
+ &.highlighted {
+ background: #FFFF99;
+ }
+
+ &.unread {
+ font-weight: bold;
+ }
+
+ &.context-row {
+ color: gray;
+ }
}
- &.unread {
- font-weight: bold;
+ .column-drag-marker {
+ z-index: 99999;
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 2px;
+ background-color: #ccc;
}
-
- &.context-row {
- color: gray;
- }
- }
-
- .column-drag-marker {
- z-index: 99999;
- position: absolute;
- top: 0;
- height: 100%;
- width: 2px;
- background-color: #ccc;
- }
}
.virtualized-table-header {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: calc(100% - 11px);
- border-bottom: 1px solid #ccc;
- background: #f6f6f6;
- height: 2em;
- overflow: hidden;
- border-inline-end: 1px solid #ddd;
-
- &.static-columns {
- pointer-events: none;
- }
-
- .column-picker {
- text-align: center;
- }
-
- .cell {
display: flex;
- position: relative;
- height: 100%;
+ flex-direction: row;
align-items: center;
-
- &:hover {
- background: #fff;
- }
-
- &.dragging {
- background: #e9e9e9;
- }
-
- .resizer {
- background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%;
- cursor: col-resize;
- height: 100%;
- content: "\00a0";
- display: block;
- position: absolute;
- left: -5px;
- min-width: 10px;
- }
-
- .label {
- margin-inline-start: 10px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- &.cell-icon {
- > .label {
- margin-inline-start: 0;
- }
- justify-content: center;
- }
-
- .sort-indicator {
- -moz-appearance: toolbarbutton-dropdown;
- display: block;
- position: absolute;
- right: 10px;
-
- &.ascending {
- transform: rotate(180deg);
- }
- }
- }
-}
-
-.virtualized-table-body, .drag-image-container{
- flex: 1 0;
- max-width: 100%;
- overflow: auto;
-
- .row {
- padding-inline-start: 6px;
- }
-
- .cell {
- padding: 2px 5px;
- text-overflow: ellipsis;
+ width: calc(100% - 11px);
+ border-bottom: 1px solid #ccc;
+ background: #f6f6f6;
+ height: 2em;
overflow: hidden;
- pointer-events: none;
- min-height: 90%;
- }
+ border-inline-end: 1px solid #ddd;
+ padding-inline-start: 6px;
+
+ &.static-columns {
+ pointer-events: none;
+ }
+
+ .column-picker {
+ text-align: center;
+ }
+
+ .cell {
+ display: flex;
+ position: relative;
+ height: 100%;
+ align-items: center;
+
+ &:hover {
+ background: #fff;
+ }
+
+ &.dragging {
+ background: #e9e9e9;
+ }
+
+ .resizer {
+ background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%;
+ cursor: col-resize;
+ height: 100%;
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ left: -5px;
+ min-width: 10px;
+ }
+
+ .label {
+ margin-inline-start: 10px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &:first-child .label {
+ margin-inline-start: 4px;
+ }
+
+ &.cell-icon {
+ > .label {
+ margin-inline-start: 0;
+ }
+
+ justify-content: center;
+ }
+
+ .sort-indicator {
+ -moz-appearance: toolbarbutton-dropdown;
+ display: block;
+ position: absolute;
+ right: 10px;
+
+ &.ascending {
+ transform: rotate(180deg);
+ }
+ }
+ }
}
+
+.virtualized-table-body, .drag-image-container {
+ flex: 1 0;
+ max-width: 100%;
+ overflow: auto;
+
+ .row {
+ padding-inline-start: 6px;
+ }
+
+ .cell {
+ padding: 2px 5px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ pointer-events: none;
+ min-height: 90%;
+ }
+}
+
.spacer-twisty {
- display: inline-block;
- min-width: 8px;
+ display: inline-block;
+ min-width: 8px;
}
.twisty {
- margin-inline-end: 0 !important;
- display: flex;
- align-items: center;
+ margin-inline-end: 0 !important;
+ display: flex;
+ align-items: center;
- svg {
- fill: #444;
- transition: transform 0.125s ease;
- transform: rotate(-90deg);
- }
+ svg {
+ fill: #444;
+ transition: transform 0.125s ease;
+ transform: rotate(-90deg);
+ }
- &.open svg {
- transform: rotate(0deg) !important;
- }
+ &.open svg {
+ transform: rotate(0deg) !important;
+ }
}
*[dir=rtl] {
- .virtualized-table-header {
- .cell .sort-indicator {
- left: 10px;
- right: initial;
+ .virtualized-table-header {
+ .cell .sort-indicator {
+ left: 10px;
+ right: initial;
+ }
+
+ .resizer {
+ right: -5px;
+ left: initial;
+ }
}
- .resizer {
- right: -5px;
- left: initial;
+
+ .twisty svg {
+ transform: rotate(90deg);
}
- }
- .twisty svg {
- transform: rotate(90deg);
- }
}