fix(webui): remove emojis from nav, fix metrics chart sizing

- Remove all emojis from sidebar nav and logo (broken on server console fonts)
- Fix canvas chart: use parentElement.getBoundingClientRect() for width,
  set explicit H=120px — fixes empty charts when offsetWidth/Height is 0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 22:49:09 +03:00
parent ed4f8be019
commit d50760e7c6

View File

@@ -67,8 +67,8 @@ tr:hover td{background:#1a2030}
.form-row input,.form-row select{width:100%;padding:8px 10px;background:#0f1117;border:1px solid #252d3d;border-radius:6px;color:#e2e8f0;font-size:13px;outline:none}
.form-row input:focus,.form-row select:focus{border-color:#3b82f6}
/* Metrics chart */
.chart-wrap{position:relative;height:140px;background:#0a0d14;border-radius:8px;overflow:hidden;margin-bottom:8px}
canvas.chart{width:100%;height:100%}
.chart-wrap{position:relative;background:#0a0d14;border-radius:8px;overflow:hidden;margin-bottom:8px;line-height:0}
canvas.chart{display:block}
.chart-legend{font-size:11px;color:#64748b;padding:4px 0}
/* Grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@@ -88,18 +88,18 @@ canvas.chart{width:100%;height:100%}
func layoutNav(active string) string {
items := []struct{ id, icon, label string }{
{"dashboard", "📊", "Dashboard"},
{"metrics", "📈", "Metrics"},
{"tests", "🧪", "Acceptance Tests"},
{"burn-in", "🔥", "Burn-in"},
{"network", "🌐", "Network"},
{"services", "⚙️", "Services"},
{"export", "📦", "Export"},
{"tools", "🔧", "Tools"},
{"dashboard", "", "Dashboard"},
{"metrics", "", "Metrics"},
{"tests", "", "Acceptance Tests"},
{"burn-in", "", "Burn-in"},
{"network", "", "Network"},
{"services", "", "Services"},
{"export", "", "Export"},
{"tools", "", "Tools"},
}
var b strings.Builder
b.WriteString(`<aside class="sidebar">`)
b.WriteString(`<div class="sidebar-logo">🐝 bee<span>hardware audit</span></div>`)
b.WriteString(`<div class="sidebar-logo">bee<span>hardware audit</span></div>`)
b.WriteString(`<nav class="nav">`)
for _, item := range items {
cls := "nav-item"
@@ -110,8 +110,8 @@ func layoutNav(active string) string {
if item.id != "dashboard" {
href = "/" + item.id
}
b.WriteString(fmt.Sprintf(`<a class="%s" href="%s"><span class="nav-icon">%s</span>%s</a>`,
cls, href, item.icon, item.label))
b.WriteString(fmt.Sprintf(`<a class="%s" href="%s">%s</a>`,
cls, href, item.label))
}
b.WriteString(`</nav></aside>`)
return b.String()
@@ -282,8 +282,10 @@ function push(arr, val) { arr.push(val); if (arr.length > WINDOW) arr.shift(); }
function drawChart(canvasId, datasets, maxY) {
const c = document.getElementById(canvasId);
if (!c) return;
const W = c.offsetWidth, H = c.offsetHeight;
c.width = W; c.height = H;
const rect = c.parentElement.getBoundingClientRect();
const W = rect.width || 400;
const H = 120;
c.width = W; c.height = H; c.style.width=W+'px'; c.style.height=H+'px';
const ctx = c.getContext('2d');
ctx.clearRect(0,0,W,H);
ctx.fillStyle = '#0a0d14';