diff --git a/webui/index.html b/webui/index.html index f9c2507a..e9791098 100644 --- a/webui/index.html +++ b/webui/index.html @@ -651,7 +651,7 @@ diff --git a/webui/static/style.css b/webui/static/style.css index cea5ca67..42325850 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -64905,6 +64905,7 @@ body.reduce-effects .dash-card::after { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55)); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); } +.em-manage-btn-logo { width: 22px; height: 22px; object-fit: contain; display: block; } .em-manage-btn-label { background: linear-gradient(90deg, #fff, rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; } .enrichment-manager-modal { diff --git a/webui/static/worker-orbs.js b/webui/static/worker-orbs.js index ad91a09d..1901a129 100644 --- a/webui/static/worker-orbs.js +++ b/webui/static/worker-orbs.js @@ -591,12 +591,16 @@ ctx.fill(); if (hubImageReady) { - // SoulSync logo as the nucleus — sized to the pulsing radius, - // brightness lifts a touch with energy - const imgSize = hubR * 3.2; + // SoulSync logo as the nucleus — fit to the pulsing radius while + // preserving the image's natural aspect ratio (no stretch) + const natW = hubImage.naturalWidth || 1; + const natH = hubImage.naturalHeight || 1; + const fit = (hubR * 3.2) / Math.max(natW, natH); + const dw = natW * fit; + const dh = natH * fit; ctx.save(); ctx.globalAlpha = Math.min(1, 0.85 + energy * 0.15 + slow * 0.1); - ctx.drawImage(hubImage, orb.x - imgSize / 2, orb.y - imgSize / 2, imgSize, imgSize); + ctx.drawImage(hubImage, orb.x - dw / 2, orb.y - dh / 2, dw, dh); ctx.restore(); } else { // Fallback while the logo loads: solid bright core + highlight