Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(backup): pair tags and paths on one row in snapshot details

Browse Source 
Tags and Paths were stacked full-width blocks, so a single tag chip and a
single path each burned a whole row and left the panel mostly empty. Wrap
them in a .bsm-blocks auto-fit grid that seats them side by side and falls
back to stacking under ~460px. The wrapper now owns the divider, so it
renders once for the pair instead of once per block, and is omitted
entirely when neither block has content.

Applied to both renderers of this markup: the global Backups view and the
per-app backup card.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-08-01 13:43:27 +01:00
parent 5db36ac3c7
commit 0b0fe3de40
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
containers/libreportal/frontend/components/backup/core/css/backup.css
View File

@ -1356,7 +1356,7 @@
/* Snapshot detail panel. The shared .task-meta/.meta-item layout forces
one nowrap line per item and clips long values (the full date, repo
paths) mid-string, so the backup row gets its own label-over-value grid
plus full-width blocks for tags and paths that wrap cleanly. */
plus a paired tags/paths row that wraps cleanly. */
.backup-snapshot-meta {
display: flex;
flex-direction: column;
@ -1398,12 +1398,20 @@
border-radius: 4px;
word-break: break-all;
}
/* Tags and paths sit side by side on one row, dropping to a single column
when the panel is too narrow to give both a readable width. */
.backup-snapshot-meta .bsm-blocks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px 18px;
padding-top: 13px;
border-top: 1px solid rgba(var(--text-rgb), 0.08);
}
.backup-snapshot-meta .bsm-block {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 13px;
border-top: 1px solid rgba(var(--text-rgb), 0.08);
min-width: 0;
}
.backup-snapshot-meta .bsm-tags {
display: flex;

21
containers/libreportal/frontend/components/backup/snapshots/js/backup-snapshots.js
View File

@ -109,15 +109,18 @@ Object.assign(BackupPage.prototype, {
${field('When', `<span title="${this.escape(this._fmtFullTime(r.time))}">${this.escape(this._fmtNiceTime(r.time))}</span>`)}
${engineName ? field('Engine', this.escape(engineName)) : ''}
</div>
${otherTags.length ? `
<div class="bsm-block">
<span class="bsm-label">Tags</span>
<div class="bsm-tags">${otherTags.map(t => `<span class="backup-snapshot-tag">${this.escape(t)}</span>`).join('')}</div>
</div>` : ''}
${r.paths && r.paths.length ? `
<div class="bsm-block">
<span class="bsm-label">Paths</span>
<ul class="bsm-paths">${r.paths.map(p => `<li><code>${this.escape(p)}</code></li>`).join('')}</ul>
${otherTags.length || (r.paths && r.paths.length) ? `
<div class="bsm-blocks">
${otherTags.length ? `
<div class="bsm-block">
<span class="bsm-label">Tags</span>
<div class="bsm-tags">${otherTags.map(t => `<span class="backup-snapshot-tag">${this.escape(t)}</span>`).join('')}</div>
</div>` : ''}
${r.paths && r.paths.length ? `
<div class="bsm-block">
<span class="bsm-label">Paths</span>
<ul class="bsm-paths">${r.paths.map(p => `<li><code>${this.escape(p)}</code></li>`).join('')}</ul>
</div>` : ''}
</div>` : ''}
</div>
</div>

21
containers/libreportal/frontend/core/backup-card/js/backup-app-card.js
View File

@ -129,15 +129,18 @@ class BackupAppCard {
${field('When', `<span title="${this.escape(this._fmtFull(s.time))}">${this.escape(this._fmtNice(s.time))}</span>`)}
${engineName ? field('Engine', this.escape(engineName)) : ''}
</div>
${otherTags.length ? `
<div class="bsm-block">
<span class="bsm-label">Tags</span>
<div class="bsm-tags">${otherTags.map(t => `<span class="backup-snapshot-tag">${this.escape(t)}</span>`).join('')}</div>
</div>` : ''}
${s.paths && s.paths.length ? `
<div class="bsm-block">
<span class="bsm-label">Paths</span>
<ul class="bsm-paths">${s.paths.map(p => `<li><code>${this.escape(p)}</code></li>`).join('')}</ul>
${otherTags.length || (s.paths && s.paths.length) ? `
<div class="bsm-blocks">
${otherTags.length ? `
<div class="bsm-block">
<span class="bsm-label">Tags</span>
<div class="bsm-tags">${otherTags.map(t => `<span class="backup-snapshot-tag">${this.escape(t)}</span>`).join('')}</div>
</div>` : ''}
${s.paths && s.paths.length ? `
<div class="bsm-block">
<span class="bsm-label">Paths</span>
<ul class="bsm-paths">${s.paths.map(p => `<li><code>${this.escape(p)}</code></li>`).join('')}</ul>
</div>` : ''}
</div>` : ''}
</div>
</div>