catarrh/simtrace-analyser
1
0 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Files view: widen the change-details modal again and keep the legend on one row

Browse Source 
- modal max-width 900px -> 1100px
- the legend's swatch and label were separate flex children, so a line break
  could split them and the three entries wrapped; each pair is now one
  `.hex-legend-item` (nowrap, no shrink) and the legend itself is
  `flex-wrap: nowrap` with `overflow-x: auto`, so it stays on a single row
- Node test: the modal test now checks the path header and that the legend
  follows the views as three grouped items
- SW cache simtrace-analyser-v70 (cosmetic, no version bump)
This commit is contained in:
catarrh committed 2026-10-17 21:40:50 +03:00
1 parent f13a2aeacd
commit bd0c9a2c4a
3 files changed
+12 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/index.html
+6 -5
View File
@@ -190,9 +190,10 @@ body { font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(-
.file-op-card { color: var(--warn); }
.file-op .file-op-diff { margin-left: auto; background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0 2px; flex: 0 0 auto; text-decoration: underline; }
.file-op .file-op-diff:hover { color: var(--warn); }
.file-diff-modal { max-width: 900px; }
.file-diff-modal { max-width: 1100px; }
.file-diff-body { max-height: 60vh; overflow-y: auto; margin-bottom: 16px; }
.hex-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 10px; flex-wrap: wrap; }
.hex-legend { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--text-muted); margin-top: 10px; flex-wrap: nowrap; overflow-x: auto; }
.hex-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; }
.hex-summary { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.hex-pair { display: flex; gap: 16px; flex-wrap: wrap; }
.hex-pair > div { flex: 1 1 320px; min-width: 0; }
@@ -2253,9 +2254,9 @@ function renderFileDiff(image) {
<div><h4>${t('After')}</h4>${hexImageHtml(image, 'after')}</div>
</div>
<div class="hex-legend">
<span class="hex-cell hex-changed">aa</span> ${t('changed')}
<span class="hex-cell hex-new">aa</span> ${t('newly observed')}
<span class="hex-cell hex-unknown">--</span> ${t('never observed')}
<span class="hex-legend-item"><span class="hex-cell hex-changed">aa</span> ${t('changed')}</span>
<span class="hex-legend-item"><span class="hex-cell hex-new">aa</span> ${t('newly observed')}</span>
<span class="hex-legend-item"><span class="hex-cell hex-unknown">--</span> ${t('never observed')}</span>
</div>` +
(image.image_truncated ? `<p class="hex-note">${t('The image is frozen (size cap reached) — later changes are not tracked.')}</p>` : '');
}