mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 06:23:06 +08:00
fix(base): absolutely position row-number content to eliminate layout shift
This commit is contained in:
@@ -298,27 +298,34 @@
|
||||
}
|
||||
|
||||
.rowNumberCellInner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.rowNumberIndex {
|
||||
display: inline;
|
||||
.rowNumberIndex,
|
||||
.rowNumberCheckbox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rowNumberCheckbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rowNumberCheckbox,
|
||||
.rowNumberDragHandle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 4px;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rowNumberDragHandle {
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -327,7 +334,7 @@
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* On hover, hide the index and show drag handle + checkbox */
|
||||
/* On row hover: swap index for checkbox, reveal drag handle */
|
||||
.row:hover .rowNumberIndex {
|
||||
display: none;
|
||||
}
|
||||
@@ -336,9 +343,8 @@
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* When selected, checkbox always visible; index + drag handle hidden */
|
||||
.rowSelected .rowNumberIndex,
|
||||
.rowSelected .rowNumberDragHandle {
|
||||
/* Selected row: checkbox always visible, drag handle still only on hover */
|
||||
.rowSelected .rowNumberIndex {
|
||||
display: none;
|
||||
}
|
||||
.rowSelected .rowNumberCheckbox {
|
||||
|
||||
Reference in New Issue
Block a user