fixed inference throughput plot for mobile

app/src/content/embeds/inference-throughput-compare.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <title>GPU Throughput Comparison</title>
 <style>
-  :root {
+  .throughput-compare-viz {
     color-scheme: light dark;
     --bg: #ffffff;
     --surface: #f9fafb;
@@ -28,7 +28,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :root {
+    .throughput-compare-viz {
       --bg: #020617;
       --surface: #0b1324;
       --canvas-bg: #f8fafc;
@@ -49,18 +49,27 @@
       --slider-end: #facc15;
       --slider-rest: #334155;
     }
-    .bottom-strip { color: #e2e8f0; }
-    .bottom-strip .tps { color: #cbd5e1; }
+    .throughput-compare-viz .bottom-strip { color: #e2e8f0; }
+    .throughput-compare-viz .bottom-strip .tps { color: #cbd5e1; }
   }
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
+  .throughput-compare-viz,
+  .throughput-compare-viz * { box-sizing: border-box; }
+  .throughput-compare-viz * { margin: 0; padding: 0; }
 
-  .viz { width: 100%; max-width: 1200px; }
+  .throughput-compare-viz {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 16px 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: system-ui, sans-serif;
+  }
 
   .control-group { display: flex; flex-direction: column; gap: 4px; }
   .control-group label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
-  select {
+  .throughput-compare-viz select {
     -webkit-appearance: none;
     appearance: none;
     color: var(--text-strong);
@@ -122,36 +131,7 @@
   .landmark-row.top .name { color: var(--training); }
   .landmark-row.bottom .tick { background: var(--brand); }
   .landmark-row.bottom .name { color: var(--brand); }
-  #row-a1 .landmark, #row-b1 .landmark { z-index: 2; }
-  #row-a2 .landmark, #row-b2 .landmark { z-index: 1; }
-  #row-a2 .landmark .tick,
-  #row-b2 .landmark .tick { position: relative; }
-  #row-a2 .landmark .tick::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 100%;
-    width: 1px;
-    height: 18px;
-    background: var(--training);
-    opacity: 0.35;
-    z-index: -1;
-  }
-  #row-b2 .landmark .tick::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 100%;
-    width: 1px;
-    height: 18px;
-    background: var(--brand);
-    opacity: 0.35;
-    z-index: -1;
-  }
-
-  .landmark .tooltip { display: none; position: absolute; left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 300px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
+  .landmark .tooltip { display: none; position: absolute; left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: min(300px, calc(100vw - 32px)); white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
   .landmark-row.top .tooltip { top: calc(100% + 4px); }
   .landmark-row.bottom .tooltip { top: calc(100% + 4px); }
   .landmark .tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 5px solid transparent; }
@@ -261,7 +241,7 @@
   .speedup-badge .ratio.b-faster { color: var(--brand-b); }
 
   .datasets { min-width: 180px; display: flex; flex-direction: column; justify-content: center; }
-  .datasets-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
+  .datasets-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; white-space: nowrap; }
   .dataset-bars { display: flex; flex-direction: column; gap: 4px; }
   .dataset-item { display: flex; align-items: center; gap: 5px; font-size: 12px; position: relative; cursor: pointer; }
   .dataset-item .ds-check { font-size: 15px; width: 18px; text-align: center; }
@@ -270,7 +250,7 @@
   .dataset-item .ds-size { color: var(--text-faint); font-size: 11px; }
   .dataset-item.done .ds-name { color: var(--success); }
   .dataset-item.done .ds-time { color: var(--success); }
-  .dataset-item .ds-tip { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 260px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
+  .dataset-item .ds-tip { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: min(260px, calc(100vw - 32px)); white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
   .dataset-item .ds-tip::after { content: ''; position: absolute; bottom: 100%; left: 20px; border: 5px solid transparent; border-bottom-color: var(--tooltip-bg); }
   .dataset-item:hover { z-index: 99999; }
   .dataset-item:hover .ds-tip { display: block; }
@@ -279,26 +259,77 @@
   .instance-b .ds-time { color: var(--brand-b); }
 
   @media (max-width: 980px) {
-    .canvas-row { flex-direction: column; }
-    .canvas-row .side-panel { align-items: flex-start; }
-    .landmark .name { font-size: 9px; }
-    .bottom-strip {
+    .throughput-compare-viz .canvas-row { flex-direction: column; }
+    .throughput-compare-viz .canvas-row .side-panel { align-items: flex-start; }
+    .throughput-compare-viz .landmark .name { font-size: 9px; }
+    .throughput-compare-viz .bottom-strip {
       left: 6px;
       right: 6px;
       font-size: 10px;
     }
-    .output-num { font-size: 10px; }
-    .output-unit { font-size: 10px; }
-    .output-unit-emoji { font-size: 12px; }
-    .output-heading { font-size: 9px; }
-    .datasets { max-width: 100%; min-width: 0; }
-    .dataset-bars { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
-    .dataset-item { font-size: 12px; }
+    .throughput-compare-viz .output-num { font-size: 10px; }
+    .throughput-compare-viz .output-unit { font-size: 10px; }
+    .throughput-compare-viz .output-unit-emoji { font-size: 12px; }
+    .throughput-compare-viz .output-heading { font-size: 9px; }
+    .throughput-compare-viz .datasets { max-width: 100%; min-width: 0; }
+    .throughput-compare-viz .dataset-bars { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
+    .throughput-compare-viz .dataset-item { font-size: 12px; }
+  }
+
+  @media (max-width: 640px) {
+    .throughput-compare-viz { overflow-x: hidden; }
+    .throughput-compare-viz .slider-area { margin-bottom: 10px; }
+    .throughput-compare-viz .datasets-title {
+      white-space: nowrap;
+      font-size: 9px;
+      letter-spacing: 0.35px;
+    }
+    .throughput-compare-viz .landmark .tick { height: 6px; }
+    .throughput-compare-viz .canvas-row .side-panel { width: 100%; }
+    .throughput-compare-viz .control-group { width: 100%; }
+    .throughput-compare-viz select { width: 100%; }
+    .throughput-compare-viz .landmark .name {
+      max-width: 68px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 8px;
+    }
+    .throughput-compare-viz .bottom-strip {
+      position: absolute;
+      bottom: 4px;
+      left: 6px;
+      right: 6px;
+      margin-top: 0;
+      padding: 0;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      gap: 8px;
+    }
+    .throughput-compare-viz .throughput-strip {
+      flex: 1 1 auto;
+      text-align: left;
+      white-space: nowrap;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-right: 8px;
+    }
+    .throughput-compare-viz .output-panel {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      white-space: nowrap;
+      min-width: 0;
+      gap: 4px;
+    }
+    .throughput-compare-viz .output-heading { font-size: 8px; }
+    .throughput-compare-viz .output-num,
+    .throughput-compare-viz .output-unit { font-size: 9px; }
+    .throughput-compare-viz .output-unit-emoji { font-size: 11px; }
   }
 </style>
 </head>
 <body>
-<div class="viz">
+<div class="viz throughput-compare-viz">
   <div class="slider-area">
     <div class="gpu-label" data-role="gpuLabel">1 GPU</div>
     <div class="landmark-row top" data-role="row-a2"></div>
@@ -553,19 +584,19 @@
   applyModelDefault(modelASelect, defaultModelA);
   applyModelDefault(modelBSelect, defaultModelB);
 
+  datasetsTitleAEl.textContent = 'Time to generate dataset';
+  datasetsTitleBEl.textContent = 'Time to generate dataset';
+
   if (isCompareMode) {
-    datasetsTitleAEl.textContent = 'Time to generate dataset';
-    datasetsTitleBEl.textContent = 'Time to generate dataset';
     booksRateAEl.textContent = '0 pages/sec';
     booksRateBEl.textContent = '0 pages/sec';
   } else {
-    datasetsTitleAEl.innerHTML = 'Time to generate dataset<br>at current throughput';
     booksRateAEl.textContent = '0 books/sec';
   }
 
   const themeTokens = {};
   function refreshThemeTokens() {
-    const styles = getComputedStyle(document.documentElement);
+    const styles = getComputedStyle(root);
     themeTokens.sliderStart = styles.getPropertyValue('--slider-start').trim();
     themeTokens.sliderMid = styles.getPropertyValue('--slider-mid').trim();
     themeTokens.sliderEnd = styles.getPropertyValue('--slider-end').trim();
@@ -740,12 +771,20 @@
 
     function resizeCanvas() {
       const w = canvas.clientWidth;
+      if (!w) return;
+      const aspectRatio = w <= 640 ? 0.42 : 0.28;
+      const h = Math.round(w * aspectRatio);
       canvas.width = w * 2;
-      canvas.height = Math.round(w * 0.28) * 2;
-      canvas.style.height = Math.round(w * 0.28) + 'px';
+      canvas.height = h * 2;
+      canvas.style.height = h + 'px';
     }
     resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
+    if (window.ResizeObserver) {
+      const resizeObserver = new ResizeObserver(() => resizeCanvas());
+      if (canvas.parentElement) resizeObserver.observe(canvas.parentElement);
+    } else {
+      window.addEventListener('resize', resizeCanvas);
+    }
 
     let floatingItems = [], totalTokens = 0, spawnAccum = 0;
     let _fNow = 0, _fPps = 0, _fFanPhase = 0, _fBlinkSpeed = 0;