Fix trade records table scroll with sticky header and themed background.

Use card CSS variables for 10-row viewport, sticky column headers, and dark/light theme sync.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-26 01:31:06 +08:00
parent aad88a9e98
commit f457e7d6c9
+29
View File
@@ -432,6 +432,35 @@
.trade-table .cell-readonly{color:var(--text-primary)} .trade-table .cell-readonly{color:var(--text-primary)}
.records-trade-card{overflow:visible} .records-trade-card{overflow:visible}
.records-trade-card .card-body{overflow:visible} .records-trade-card .card-body{overflow:visible}
.records-trade-card .trade-table-wrap{
--rec-row-h:2.35rem;
--rec-head-h:2.1rem;
overflow:auto;
height:calc(var(--rec-row-h) * 10 + var(--rec-head-h));
max-height:calc(var(--rec-row-h) * 10 + var(--rec-head-h));
width:100%;
-webkit-overflow-scrolling:touch;
border-radius:10px;
border:1px solid var(--card-border);
background:var(--card-inner);
}
.records-trade-card .trade-table thead th{
position:sticky;
top:0;
z-index:2;
background:var(--card-inner);
box-shadow:0 1px 0 var(--table-border);
}
.records-trade-card .trade-table thead th:last-child{
z-index:5;
background:var(--card-inner);
}
.records-trade-card .trade-table tbody td{
background:var(--card-inner);
}
.records-trade-card .trade-table tbody td:last-child{
background:var(--card-inner);
}
.trade-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;min-width:230px;white-space:nowrap} .trade-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;min-width:230px;white-space:nowrap}
.trade-actions a,.trade-actions button{flex-shrink:0;white-space:nowrap;font-size:.72rem;padding:.3rem .55rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer;width:auto;min-width:0} .trade-actions a,.trade-actions button{flex-shrink:0;white-space:nowrap;font-size:.72rem;padding:.3rem .55rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer;width:auto;min-width:0}
.btn-fill{background:var(--dir-bg);color:var(--accent)} .btn-fill{background:var(--dir-bg);color:var(--accent)}