fix(dashboard): scroll the activity log and run history instead of stretching the page

Both panels rendered every row they were given, so a busy instance turned the
homepage into a 60-row wall the user had to scroll past to reach anything below.

The activity log now caps at 12 rows and the run history at 10, both scrolling
inside the panel, with the run history's column header pinned. A collapsed border
does not travel with a sticky cell, so that rule is redrawn as an inset shadow.

Expanding a run lifts the cap for as long as the row is open: its steps and task
log are far too tall to read through a 10-row window.
This commit is contained in:
Catubba
2026-08-05 23:25:26 +02:00
parent 9820258fa8
commit b1b7349aaf
4 changed files with 23 additions and 2 deletions
+15
View File
@@ -577,8 +577,17 @@
color: var(--jn-text);
background: color-mix(in srgb, var(--jn-accent) 9%, transparent);
}
/* 10 rows before it scrolls: 28px header + 10 × 39px (8+8 padding + the 22px status pill
+ 1px divider) — keep in step if the cell padding or the pill changes. */
.table-scroll {
overflow-x: auto;
overflow-y: auto;
max-height: 418px;
}
/* An expanded row carries the steps + task log: too tall to read through a 12-row window,
so RunHistory lifts the cap for as long as one is open. */
.table-scroll.uncapped {
max-height: none;
}
.htable {
width: 100%;
@@ -594,6 +603,12 @@
color: var(--jn-text-faint);
padding: 4px 16px 8px;
border-bottom: 1px solid var(--jn-border-soft);
/* Pinned while the rows scroll. A collapsed border does not travel with a sticky cell
(it is painted by the table), so the rule is redrawn as an inset shadow. */
position: sticky;
top: 0;
background: var(--jn-panel);
box-shadow: inset 0 -1px 0 var(--jn-border-soft);
}
.htable td {
padding: 8px 16px;
+1 -1
View File
@@ -34,7 +34,7 @@ export function ActivityLog({ logs }: { logs: LogLine[] }) {
<span style={colHead}>{t('dashboard.colLevel')}</span>
<span style={colHead}>{t('dashboard.colMessage')}</span>
</div>
<div>
<div className="jn-log-list">
{logs.length === 0 && (
<div style={{ padding: '14px 18px', fontSize: 13, color: c.textFaint }}>{t('dashboard.noLogs')}</div>
)}
+1 -1
View File
@@ -73,7 +73,7 @@ export function RunHistory({
{shown.length === 0 ? (
<div className="panel-empty">{t('dashboard.noRuns')}</div>
) : (
<div className="table-scroll">
<div className={`table-scroll${open !== null ? ' uncapped' : ''}`}>
<table className="htable">
<thead>
<tr>
+6
View File
@@ -63,6 +63,12 @@
display: grid;
grid-template-columns: 84px 96px 1fr;
}
/* 60 events is a tall page; scroll them. 12 rows of 34.5px (7+7 padding + 13px text at
the shell's 1.5 line-height + 1px divider) — keep in step if the row padding changes. */
.jn-log-list {
max-height: 414px;
overflow-y: auto;
}
/* Settings. M11 replaced the left sidebar with top tabs, so .jn-settings-nav / -navbtn /
-rail / -hint went with it (grepped: no other consumer). What is left is the pane