mirror of
https://github.com/Joulenap/joulenap.git
synced 2026-08-11 13:21:43 +02:00
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:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user