diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css index b34e56c..5a4bd7f 100644 --- a/containers/libreportal/frontend/components/admin/core/css/admin.css +++ b/containers/libreportal/frontend/components/admin/core/css/admin.css @@ -462,6 +462,19 @@ table.sys-apps td { table.sys-apps tr:last-child td { border-bottom: none; } table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); } .sys-app-name { font-weight: 600; display: flex; align-items: center; gap: 8px; } +/* Boxed app icon, mirroring the tasks-notification app icon at row scale. */ +.sys-app-icon { + flex-shrink: 0; + width: 26px; + height: 26px; + border-radius: 6px; + background: rgba(var(--text-rgb), 0.10); + border: 1px solid rgba(var(--text-rgb), 0.18); + display: flex; + align-items: center; + justify-content: center; +} +.sys-app-icon img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; } .sys-app-sub { font-size: 0.72rem; font-weight: 500; color: rgba(var(--text-rgb), 0.45); } .sys-cell-val { font-size: 0.78rem; color: rgba(var(--text-rgb), 0.65); margin-left: 2px; } .sys-net-cell { font-size: 0.78rem; color: rgba(var(--text-rgb), 0.7); white-space: nowrap; } diff --git a/containers/libreportal/frontend/components/admin/system/js/system-page.js b/containers/libreportal/frontend/components/admin/system/js/system-page.js index bcd7dfe..cf51df1 100644 --- a/containers/libreportal/frontend/components/admin/system/js/system-page.js +++ b/containers/libreportal/frontend/components/admin/system/js/system-page.js @@ -302,8 +302,10 @@ class SystemPage { const appsBody = apps.length ? apps.map(a => { const spark = (appsHist[a.app] || []).map(p => Number(p.cpu) || 0); const statusCls = a.status === 'running' ? 'ok' : 'none'; + // Multi-instance slugs (_) share the base type's icon. + const iconSlug = String(a.app).replace(/_\d+$/, ''); return ` - ${this.escape(a.app)} + ${this.escape(a.app)} ${a.running}/${a.containers} up ${C.bar(a.cpu_percent)}${(a.cpu_percent || 0).toFixed(1)}% ${C.bar(a.mem_percent)}${this.bytes(a.mem_bytes)}