v0.36.6

src/admin/web/app/runtime.js

@@ -408,7 +408,7 @@ function cacheOutcomeMix(totals) {
     return { counts, percentages: counts.map(value => value / requests * 100), requests };
 }
 // Percent labels live inside the bar segments; a label that does not fit is hidden
-// (the legend below always carries the exact value).
+// (the exact count and percentage stay in the segment and legend tooltips).
 function fitCacheMixLabels() {
     const bar = $("cache-mix-bar");
     if (!bar) return;
@@ -429,8 +429,8 @@ function renderCacheMix(mix, totalRequests) {
         const segment = $(`cache-mix-${name}`);
         segment.style.width = `${pct}%`;
         segment.textContent = mix && pct > 0 ? `${fmt(pct, pct < 10 ? 1 : 0)}%` : "";
-        $(`cache-mix-${name}-count`).textContent = mix ? fmt(mix.counts[i]) : "-";
-        $(`cache-mix-${name}-percent`).textContent = mix ? `${fmt(pct, 1)}%` : "-";
+        const detail = mix ? `${name.toUpperCase()}: ${fmt(mix.counts[i])} (${fmt(pct, 1)}%)` : "";
+        segment.title = detail; $(`cache-mix-${name}-key`).title = detail;
     });
     fitCacheMixLabels();
     $("cache-mix-headline").textContent = mix ? `${fmt(mix.percentages[0], 1)}% HIT` : "-";

src/admin/web/css/30-overview.css

@@ -2246,24 +2246,6 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
   background: var(--chart-secondary);
 }
 
-#panel-overview .cache-mix-legend b {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 2px;
-  margin-left: 1px;
-  color: var(--text);
-  font: 500 9px var(--mono);
-}
-
-#panel-overview .cache-mix-legend .cache-mix-percent {
-  color: var(--muted);
-  font: 400 8px var(--mono);
-}
-
-#panel-overview .cache-mix-legend .cache-mix-percent::before {
-  content: "· ";
-}
-
 #panel-overview .system-card .system-uptime-meta,
 #panel-overview .connection-card .connection-backends-meta {
   white-space: nowrap;

src/admin/web/partials/overview-metrics.html

@@ -46,15 +46,10 @@
         <span class="cache-mix-other" id="cache-mix-other" style="width:0%"></span>
     </div>
     <small class="cache-mix-legend">
-        <span class="cache-mix-hit-key"><i></i>HIT <b><span id="cache-mix-hit-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-hit-percent">-</span></b></span>
-        <span class="cache-mix-miss-key"><i></i>MISS <b><span id="cache-mix-miss-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-miss-percent">-</span></b></span>
-        <span class="cache-mix-bypass-key"><i></i>BYPASS <b><span id="cache-mix-bypass-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-bypass-percent">-</span></b></span>
-        <span class="cache-mix-other-key"><i></i><span data-i18n="cacheMixOther">OTHER</span> <b><span
-                    id="cache-mix-other-count">-</span><span class="cache-mix-percent"
-                    id="cache-mix-other-percent">-</span></b></span>
+        <span class="cache-mix-hit-key" id="cache-mix-hit-key"><i></i>HIT</span>
+        <span class="cache-mix-miss-key" id="cache-mix-miss-key"><i></i>MISS</span>
+        <span class="cache-mix-bypass-key" id="cache-mix-bypass-key"><i></i>BYPASS</span>
+        <span class="cache-mix-other-key" id="cache-mix-other-key"><i></i><span data-i18n="cacheMixOther">OTHER</span></span>
     </small>
 </article>
 <article class="stat" data-dashboard-widget="memory"><span data-i18n="processMemory">Process