scriptoriumadmin/zotero
1
0
Fork 0
mirror of https://github.com/zotero/zotero.git synced 2026-09-27 01:21:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix issues with flexbox width calculations (#5254)

Browse source 
Issues caused by differing padding values between the header cell and the table body cell
This commit is contained in:
Tom Najdek 2025-05-05 14:00:53 +02:00 • committed by Dan Stillman
parent af6e4cc44c
commit de0907c8f7
3 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
chrome/content/zotero/components/virtualized-table.jsx
View file

@ -1088,6 +1088,7 @@ class VirtualizedTable extends React.Component {
this._setXulTooltip();
this._topDiv.style.setProperty("--firstColumnExtraWidth", `${this.props.firstColumnExtraWidth || 0}px`);
window.addEventListener("resize", () => {
this._debouncedRerender();
});

6
scss/components/_item-tree.scss
View file

@ -30,15 +30,9 @@
.cell.numNotes {
padding: 0;
text-align: center;
&.first-column {
padding-inline-start: 32px;
}
}
.first-column {
padding-inline-start: 36px;
&::before {
content: "";
display: inline-block;

22
scss/components/_virtualized-table.scss
View file

@ -40,7 +40,10 @@
}
.cell {
padding: 0 8px;
// NOTE: To avoid the complexities of dealing with padding in the
// flexbox model, `.cell` padding must be identical in the header and
// body. See #5198, #5162.
padding: 0 8px;
min-width: 30px;
cursor: default;
white-space: nowrap;
@ -52,6 +55,11 @@
padding-inline-end: 4px;
}
&.first-column {
padding-inline-start: 0;
min-width: calc(var(--firstColumnExtraWidth, 0px) + 30px);
}
&.first-column,
&.primary {
display: flex;
@ -278,6 +286,13 @@
text-align: center;
}
.first-column {
> :first-child {
// offset header's column label/icon to align with the text in the first column, without introducing padding to the cell itself to avoid flexbox issues
padding-inline-start: calc(var(--firstColumnExtraWidth, 0px) + 8px);
}
}
.cell {
display: flex;
position: relative;
@ -352,6 +367,7 @@
padding: 4px 8px 8px;
.cell {
// NOTE: Do not add padding here. See #5198
text-overflow: ellipsis;
overflow: hidden;
max-height: 100%;
@ -361,10 +377,6 @@
// pointer-events are enabled, and we need to rerender the rows for selection
// before dragging.
pointer-events: none;
&.first-column {
padding-inline-start: 0;
}
}
}