fix(ui): prevent download table column overflow

This commit is contained in:
NimBold
2026-06-18 14:44:49 +03:30
parent c90ae8bcc3
commit 91d3b2cd67
3 changed files with 104 additions and 67 deletions
+97 -60
View File
@@ -931,26 +931,36 @@
font-weight: 600;
}
.download-table-scroll {
flex: 1;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
}
.download-table-scroll {
flex: 1;
min-height: 0;
min-width: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.download-table-header,
.download-row {
width: max-content;
min-width: 100%;
}
.download-table-header,
.download-row {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.download-table-header > div {
position: relative;
height: 100%;
display: flex;
align-items: center;
min-width: 0;
}
.download-table-header > div {
position: relative;
height: 100%;
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
.download-table-header > div > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-table-header > div:not(:first-child) {
border-left: 1px solid hsl(var(--border-color));
@@ -976,16 +986,22 @@
overflow: hidden;
}
.download-row {
height: 32px;
display: grid;
align-items: center;
padding: 0 16px;
margin: 2px 12px;
border-radius: 6px;
color: hsl(var(--text-primary));
font-size: 12px;
}
.download-row {
height: 32px;
display: grid;
align-items: center;
width: auto;
padding: 0 16px;
margin: 2px 12px;
border-radius: 6px;
color: hsl(var(--text-primary));
font-size: 12px;
}
.download-row > div {
min-width: 0;
overflow: hidden;
}
.download-row:nth-child(even) {
background: hsl(var(--stripe-bg));
@@ -995,32 +1011,51 @@
background: hsl(var(--item-hover));
}
.download-file-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.download-file-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
overflow: hidden;
}
.download-file-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(var(--text-primary));
font-weight: 650;
}
.download-file-name {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(var(--text-primary));
font-weight: 650;
}
.download-cell-truncate {
display: flex;
align-items: center;
min-width: 0;
}
.download-cell-truncate > span,
.download-cell-right > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-cell-muted {
color: hsl(var(--text-muted));
}
.download-cell-right {
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
}
.download-cell-right {
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
overflow: hidden;
}
.download-empty-row {
color: hsl(var(--text-muted));
@@ -1043,12 +1078,14 @@
background: hsl(var(--stripe-bg));
}
.download-status-cell {
display: flex;
align-items: center;
gap: 8px;
padding-right: 12px;
}
.download-status-cell {
display: flex;
align-items: center;
gap: 8px;
padding-right: 12px;
min-width: 0;
overflow: hidden;
}
.download-status-cell > span {
min-width: 48px;
@@ -1057,12 +1094,12 @@
font-variant-numeric: tabular-nums;
}
.download-progress-track {
width: 100%;
min-width: 58px;
height: 14px;
border-radius: 4px;
overflow: hidden;
.download-progress-track {
width: 100%;
min-width: 0;
height: 14px;
border-radius: 4px;
overflow: hidden;
background: hsl(var(--border-color));
box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.22);
}