Leaderboard: ellipsis-truncate description column; revert subtitle change
Browse files- static/index.html +11 -11
static/index.html
CHANGED
|
@@ -46,15 +46,7 @@
|
|
| 46 |
.btn-primary { font-size: 10px; padding: 6px 10px; }
|
| 47 |
.btn-primary .plus { font-size: 13px; margin-right: 4px; }
|
| 48 |
.title-row { gap: 10px; }
|
| 49 |
-
.subtitle {
|
| 50 |
-
font-size: 12px;
|
| 51 |
-
/* On narrow viewports the description would otherwise wrap to many
|
| 52 |
-
lines and dominate the page. Single-line ellipsis is friendlier. */
|
| 53 |
-
white-space: nowrap;
|
| 54 |
-
overflow: hidden;
|
| 55 |
-
text-overflow: ellipsis;
|
| 56 |
-
max-width: 100%;
|
| 57 |
-
}
|
| 58 |
.chart-wrap { height: 260px; padding: 8px; }
|
| 59 |
}
|
| 60 |
|
|
@@ -187,6 +179,9 @@
|
|
| 187 |
width: 100%; border-collapse: collapse;
|
| 188 |
font-size: 11px; font-weight: 300;
|
| 189 |
background: #fff; border: 1px solid var(--border);
|
|
|
|
|
|
|
|
|
|
| 190 |
}
|
| 191 |
.lb-table th, .lb-table td {
|
| 192 |
text-align: left;
|
|
@@ -206,7 +201,12 @@
|
|
| 206 |
.lb-table tbody tr:hover td { background: #fafafa; }
|
| 207 |
.lb-table tr.best td { background: var(--accent-soft); }
|
| 208 |
.lb-table tr.best:hover td { background: var(--accent-hover-row); }
|
| 209 |
-
.lb-table .desc {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 210 |
.lb-table .agent { color: var(--ink); font-weight: 500; }
|
| 211 |
.lb-table tr.best .bytes { color: var(--accent); font-weight: 600; }
|
| 212 |
.lb-table tr.baseline-row { color: var(--muted-2); }
|
|
@@ -1029,7 +1029,7 @@ function renderLeaderboard(entries) {
|
|
| 1029 |
<td class="num">${escapeHtml(e.bpc || '')}</td>
|
| 1030 |
<td>${escapeHtml(e.method || '')}</td>
|
| 1031 |
<td class="agent">${escapeHtml(e.agent)}</td>
|
| 1032 |
-
<td class="desc">${escapeHtml(e.run || '')}</td>
|
| 1033 |
<td>${dateStr}</td>
|
| 1034 |
`;
|
| 1035 |
lbBody.appendChild(tr);
|
|
|
|
| 46 |
.btn-primary { font-size: 10px; padding: 6px 10px; }
|
| 47 |
.btn-primary .plus { font-size: 13px; margin-right: 4px; }
|
| 48 |
.title-row { gap: 10px; }
|
| 49 |
+
.subtitle { font-size: 12px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 50 |
.chart-wrap { height: 260px; padding: 8px; }
|
| 51 |
}
|
| 52 |
|
|
|
|
| 179 |
width: 100%; border-collapse: collapse;
|
| 180 |
font-size: 11px; font-weight: 300;
|
| 181 |
background: #fff; border: 1px solid var(--border);
|
| 182 |
+
/* Fixed layout lets the desc column truncate to a definite width
|
| 183 |
+
instead of widening the column to fit long descriptions. */
|
| 184 |
+
table-layout: fixed;
|
| 185 |
}
|
| 186 |
.lb-table th, .lb-table td {
|
| 187 |
text-align: left;
|
|
|
|
| 201 |
.lb-table tbody tr:hover td { background: #fafafa; }
|
| 202 |
.lb-table tr.best td { background: var(--accent-soft); }
|
| 203 |
.lb-table tr.best:hover td { background: var(--accent-hover-row); }
|
| 204 |
+
.lb-table .desc {
|
| 205 |
+
color: var(--ink-2); font-weight: 300;
|
| 206 |
+
white-space: nowrap;
|
| 207 |
+
overflow: hidden;
|
| 208 |
+
text-overflow: ellipsis;
|
| 209 |
+
}
|
| 210 |
.lb-table .agent { color: var(--ink); font-weight: 500; }
|
| 211 |
.lb-table tr.best .bytes { color: var(--accent); font-weight: 600; }
|
| 212 |
.lb-table tr.baseline-row { color: var(--muted-2); }
|
|
|
|
| 1029 |
<td class="num">${escapeHtml(e.bpc || '')}</td>
|
| 1030 |
<td>${escapeHtml(e.method || '')}</td>
|
| 1031 |
<td class="agent">${escapeHtml(e.agent)}</td>
|
| 1032 |
+
<td class="desc" title="${escapeHtml(e.run || '')}">${escapeHtml(e.run || '')}</td>
|
| 1033 |
<td>${dateStr}</td>
|
| 1034 |
`;
|
| 1035 |
lbBody.appendChild(tr);
|