From d50760e7c6ba56e3fa41ae31dc502fbe833ebbb6 Mon Sep 17 00:00:00 2001
From: Michael Chus <mike@mchus.pro>
Date: Fri, 27 Mar 2026 22:49:09 +0300
Subject: [PATCH] fix(webui): remove emojis from nav, fix metrics chart sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 audit/internal/webui/pages.go | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/audit/internal/webui/pages.go b/audit/internal/webui/pages.go
index 85c08b6..5a47a37 100644
--- a/audit/internal/webui/pages.go
+++ b/audit/internal/webui/pages.go
@@ -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';