fix(ui): stabilize download table column interactions

This commit is contained in:
NimBold
2026-07-22 10:33:41 +03:30
parent 20a136cd1f
commit 16377aa0d6
5 changed files with 197 additions and 68 deletions
+22 -21
View File
@@ -1887,6 +1887,7 @@ html[data-list-density="relaxed"] {
.download-table-header {
flex-shrink: 0;
position: relative;
height: var(--download-header-height);
display: grid;
align-items: center;
@@ -1926,7 +1927,6 @@ html[data-list-density="relaxed"] {
min-width: 0;
overflow: hidden;
padding-inline: var(--download-column-padding-x);
padding-inline-end: calc(var(--download-column-padding-x) + 30px);
cursor: grab;
transition: background-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
@@ -1936,7 +1936,8 @@ html[data-list-density="relaxed"] {
}
.download-column-header.is-dragging {
opacity: 0.22;
opacity: 0;
pointer-events: none;
}
.download-column-header.is-drop-flashing {
@@ -1975,7 +1976,8 @@ html[data-list-density="relaxed"] {
.download-column-options {
position: absolute;
inset-inline-end: 8px;
right: 8px;
left: auto;
top: 50%;
z-index: 4;
display: inline-flex;
@@ -2008,15 +2010,6 @@ html[data-list-density="relaxed"] {
padding-inline-start: 0;
}
.download-column-header:last-child {
padding-inline-end: 30px;
}
.download-column-header:last-child,
.download-row > div:last-child {
grid-column: 7;
}
.download-column-header[data-column-key="File Name"] {
direction: ltr;
text-align: left;
@@ -2025,7 +2018,8 @@ html[data-list-density="relaxed"] {
.column-resize-handle {
position: absolute;
top: 0;
inset-inline-end: -4px;
right: -4px;
left: auto;
bottom: 0;
z-index: 5;
width: 8px;
@@ -2111,12 +2105,6 @@ html[data-list-density="relaxed"] .download-ghost-row {
padding-inline-start: 0;
}
.download-row > div:last-child {
padding-inline-end: 0;
}
.download-row.is-selected {
background: hsl(var(--accent-color) / 0.26) !important;
box-shadow: inset 0 0 0 1px hsl(var(--accent-color) / 0.28);
@@ -2138,6 +2126,10 @@ html[data-list-density="relaxed"] .download-ghost-row {
overflow: hidden;
}
.download-row:hover .download-column-cell--trailing .download-cell-content {
visibility: hidden;
}
.download-file-cell {
direction: ltr;
text-align: left;
@@ -2215,13 +2207,15 @@ html[data-list-density="relaxed"] .download-ghost-row {
.download-row-actions {
position: absolute;
top: 50%;
inset-inline-end: var(--download-row-padding-x);
right: var(--download-row-padding-x);
left: auto;
z-index: 2;
transform: translateY(-50%);
padding-inline-start: 4px;
border-radius: 6px;
background: hsl(var(--surface-overlay) / 0.94);
max-width: 100%;
padding-inline: 4px;
}
.download-column-menu {
@@ -2256,7 +2250,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
font-size: var(--download-row-font-size);
font-weight: 650;
pointer-events: none;
transition: left 70ms ease-out, top 120ms ease-out, width 120ms ease-out;
transition: top 120ms ease-out, width 120ms ease-out;
animation: column-drag-preview-in 120ms ease-out;
}
@@ -2298,6 +2292,13 @@ html[data-list-density="relaxed"] .download-ghost-row {
margin-inline-start: 0.25rem;
}
.app-workspace--sidebar-right .download-context-submenu {
inset-inline-start: auto;
inset-inline-end: 100%;
margin-inline-start: 0;
margin-inline-end: 0.25rem;
}
html[dir="rtl"] .download-context-menu-chevron {
transform: scaleX(-1);
}