improved plots for mobile

app/src/content/embeds/d3-benchmark-comparison.html

@@ -45,6 +45,7 @@
   .d3-benchmark-comparison { position: relative; }
   .d3-benchmark-comparison .controls {
     display: flex;
+    flex-wrap: wrap;
     gap: 16px;
     align-items: flex-end;
     justify-content: center;
@@ -158,6 +159,28 @@
     margin-right: 6px;
     vertical-align: middle;
   }
+  @media (max-width: 640px) {
+    .d3-benchmark-comparison .controls {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 10px;
+    }
+    .d3-benchmark-comparison .controls .control-group {
+      width: 100%;
+    }
+    .d3-benchmark-comparison .controls select {
+      width: 100%;
+    }
+    .d3-benchmark-comparison .legend .item {
+      white-space: normal;
+      align-items: flex-start;
+      line-height: 1.2;
+    }
+    .d3-benchmark-comparison .legend .swatch {
+      flex-shrink: 0;
+      margin-top: 1px;
+    }
+  }
 </style>
 <script>
   (() => {
@@ -376,7 +399,8 @@
         tipInner.innerHTML = html;
         const tipW = tip.offsetWidth || 180;
         const cW = container.clientWidth || 800;
-        const px = (x + tipW + 20 > cW) ? x - tipW - 12 : x + 12;
+        const preferredX = (x + tipW + 20 > cW) ? x - tipW - 12 : x + 12;
+        const px = Math.max(0, Math.min(preferredX, Math.max(0, cW - tipW - 6)));
         tip.style.transform = `translate(${px}px, ${Math.max(0, y - 20)}px)`;
         tip.style.opacity = '1';
       }
@@ -411,8 +435,8 @@
       // ─── BAR CHART ───
       function renderBar() {
         const width = container.clientWidth || 800;
+        const isMobile = width < 640;
         const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
-        const margin = { top: hasBaselines ? 20 : 12, right: 56, bottom: 32, left: 190 };
 
         const grouped = d3.group(allData, d => d[RUN_COL]);
         const finalData = [];
@@ -425,6 +449,17 @@
 
         const barData = finalData.filter(d => !isBaseline(d.rawName));
         const baselineData = finalData.filter(d => isBaseline(d.rawName));
+        const maxLabelChars = d3.max(finalData, d => d.name.length) || 0;
+        const desiredLeft = Math.max(
+          isMobile ? 92 : 150,
+          Math.round(maxLabelChars * (isMobile ? 5.2 : 6.3))
+        );
+        const margin = {
+          top: hasBaselines ? 20 : 12,
+          right: isMobile ? 40 : 56,
+          bottom: isMobile ? 30 : 32,
+          left: Math.min(desiredLeft, isMobile ? 126 : 220),
+        };
 
         const barHeight = 28, barGap = 8;
         const height = margin.top + margin.bottom + barData.length * (barHeight + barGap);
@@ -446,9 +481,9 @@
         // X axis
         gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
           .attr('transform', `translate(0,${innerHeight})`)
-          .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format('.2f')).tickSizeOuter(0))
+          .call(d3.axisBottom(x).ticks(isMobile ? 4 : 5).tickFormat(d3.format('.2f')).tickSizeOuter(0))
           .call(g => {
-            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '11px');
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', isMobile ? '10px' : '11px');
             g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
           });
 
@@ -456,7 +491,7 @@
         gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
           .call(d3.axisLeft(y).tickSizeOuter(0))
           .call(g => {
-            g.selectAll('text').attr('fill', 'var(--text-color)').style('font-size', '12px').style('font-weight', '500');
+            g.selectAll('text').attr('fill', 'var(--text-color)').style('font-size', isMobile ? '11px' : '12px').style('font-weight', '500');
             g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
           });
 
@@ -504,7 +539,7 @@
         gRoot.selectAll('text.value-label').data(barData, d => d.name).join(
           enter => enter.append('text').attr('class', 'value-label')
             .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
-            .attr('dy', '0.35em').attr('fill', 'var(--text-color)').attr('font-size', 11)
+            .attr('dy', '0.35em').attr('fill', 'var(--text-color)').attr('font-size', isMobile ? 10 : 11)
             .text(d => d.value.toFixed(3)),
           update => update.transition().duration(300)
             .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
@@ -529,7 +564,7 @@
           enter => enter.append('text').attr('class', 'baseline-vlabel baseline')
             .attr('x', d => x(d.value)).attr('y', -4)
             .attr('text-anchor', 'middle').attr('fill', d => colorMap[d.rawName] || '#999')
-            .attr('font-size', 11).attr('font-weight', 600)
+            .attr('font-size', isMobile ? 10 : 11).attr('font-weight', 600)
             .text(d => `${d.name} (${d.value.toFixed(3)})`),
           update => update.transition().duration(300)
             .attr('x', d => x(d.value))
@@ -541,9 +576,10 @@
       // ─── LINE CHART ───
       function renderLine() {
         const width = container.clientWidth || 800;
+        const isMobile = width < 640;
         const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
-        const margin = { top: 16, right: 50, bottom: 48, left: 60 };
-        const height = Math.max(300, Math.round(width / 2.5));
+        const margin = { top: 16, right: isMobile ? 18 : 50, bottom: isMobile ? 42 : 48, left: isMobile ? 46 : 60 };
+        const height = Math.max(isMobile ? 260 : 300, Math.round(width / (isMobile ? 1.95 : 2.5)));
         svg.attr('width', width).attr('height', height);
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
@@ -581,29 +617,34 @@
         // X axis
         gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
           .attr('transform', `translate(0,${innerHeight})`)
-          .call(d3.axisBottom(x).ticks(6).tickFormat(d => stepLabelShort(d)).tickSizeOuter(0))
+          .call(
+            d3.axisBottom(x)
+              .ticks(isMobile ? 4 : 6)
+              .tickFormat(d => isMobile ? formatTokens(stepsToTokens(d)) : stepLabelShort(d))
+              .tickSizeOuter(0)
+          )
           .call(g => {
-            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '10px');
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', isMobile ? '9px' : '10px');
             g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
           });
 
         // Y axis
         gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
-          .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('.2f')).tickSizeOuter(0))
+          .call(d3.axisLeft(y).ticks(isMobile ? 5 : 6).tickFormat(d3.format('.2f')).tickSizeOuter(0))
           .call(g => {
-            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '11px');
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', isMobile ? '10px' : '11px');
             g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
           });
 
         // Axis labels
         gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
-          .attr('x', innerWidth / 2).attr('y', innerHeight + 38)
-          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 12)
+          .attr('x', innerWidth / 2).attr('y', innerHeight + (isMobile ? 32 : 38))
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', isMobile ? 11 : 12)
           .text('Tokens (Steps)');
 
         gRoot.selectAll('.y-label').data([0]).join('text').attr('class', 'y-label')
-          .attr('transform', 'rotate(-90)').attr('x', -innerHeight / 2).attr('y', -44)
-          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 12)
+          .attr('transform', 'rotate(-90)').attr('x', -innerHeight / 2).attr('y', isMobile ? -34 : -44)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', isMobile ? 11 : 12)
           .text(metricName(currentMetric));
 
         // Baseline horizontal reference lines
@@ -624,7 +665,7 @@
             .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
             .attr('text-anchor', 'start')
             .attr('fill', d => colorMap[d.rawName] || '#999')
-            .attr('font-size', 10).attr('font-weight', 600)
+            .attr('font-size', isMobile ? 9 : 10).attr('font-weight', 600)
             .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
           update => update.transition().duration(300)
             .attr('x', 4).attr('y', d => y(d.finalValue) - 6)

app/src/content/embeds/score-correlation.html

@@ -1,6 +1,6 @@
 <div class="d3-score-correlation" style="width:100%;margin:10px 0;min-height:400px;"></div>
 <style>
-  .d3-score-correlation { font-family: system-ui, -apple-system, sans-serif; }
+  .d3-score-correlation { font-family: system-ui, -apple-system, sans-serif; position: relative; overflow-x: hidden; }
   .d3-score-correlation .d3-tooltip {
     position: absolute; top: 0; left: 0;
     transform: translate(-9999px, -9999px);
@@ -29,6 +29,10 @@
   .d3-score-correlation .legend .swatch {
     width: 20px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color);
   }
+  @media (max-width: 640px) {
+    .d3-score-correlation .legend .item { font-size: 10px; }
+    .d3-score-correlation .legend .swatch { width: 16px; height: 12px; }
+  }
 </style>
 <script>
 (() => {
@@ -291,6 +295,7 @@
 
       const render = () => {
         const width = container.clientWidth || 900;
+        const isMobile = width < 640;
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const divColor = isDark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.18)';
         const textCol = isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.7)';
@@ -299,14 +304,14 @@
         const predLabels = PREDICTORS.map(p => p.label);
 
         // Layout
-        const leftMargin = 140;
-        const topMargin = 130; // extra room for two-tier header
-        const rightMargin = 10;
+        const leftMargin = isMobile ? 126 : 140;
+        const topMargin = isMobile ? 90 : 130; // extra room for two-tier header on desktop
+        const rightMargin = isMobile ? 8 : 10;
         const bottomMargin = 10;
-        const cellW = Math.max(30, Math.min(52, (width - leftMargin - rightMargin) / ALL_TARGETS.length));
-        const cellH = Math.max(28, Math.min(42, cellW * 0.82));
-        const plotW = cellW * ALL_TARGETS.length;
-        const rowGap = 8; // gap between DCLM and EDU groups
+        const plotW = Math.max(220, width - leftMargin - rightMargin);
+        const cellW = plotW / ALL_TARGETS.length;
+        const cellH = isMobile ? 26 : Math.max(28, Math.min(42, cellW * 0.82));
+        const rowGap = isMobile ? 6 : 8; // gap between DCLM and EDU groups
         const plotH = cellH * predLabels.length + rowGap;
         const totalW = leftMargin + plotW + rightMargin;
         const totalH = topMargin + plotH + bottomMargin;
@@ -333,7 +338,6 @@
         // --- Group dividers (vertical) and header labels ---
         let colOffset = 0;
         const groupHeaderY = 18; // top-level group name
-        const colLabelY = topMargin - 6; // individual column labels
 
         GROUPS.forEach((grp, gi) => {
           const groupStartX = colOffset * cellW;
@@ -349,25 +353,27 @@
               .attr('stroke-dasharray', gi === 1 ? 'none' : '4,3');
           }
 
-          // Group header label (top tier)
-          svg.append('text')
-            .attr('x', leftMargin + groupStartX + groupW / 2)
-            .attr('y', groupHeaderY)
-            .attr('text-anchor', 'middle')
-            .attr('font-size', '9.5px')
-            .attr('font-weight', '700')
-            .attr('letter-spacing', '0.5px')
-            .attr('fill', mutedCol)
-            .text(grp.name.toUpperCase());
-
-          // Bracket line under group header
-          const bracketY = groupHeaderY + 8;
-          svg.append('line')
-            .attr('x1', leftMargin + groupStartX + 4)
-            .attr('x2', leftMargin + groupStartX + groupW - 4)
-            .attr('y1', bracketY).attr('y2', bracketY)
-            .attr('stroke', mutedCol)
-            .attr('stroke-width', 0.8);
+          if (!isMobile) {
+            // Group header label (top tier)
+            svg.append('text')
+              .attr('x', leftMargin + groupStartX + groupW / 2)
+              .attr('y', groupHeaderY)
+              .attr('text-anchor', 'middle')
+              .attr('font-size', '9.5px')
+              .attr('font-weight', '700')
+              .attr('letter-spacing', '0.5px')
+              .attr('fill', mutedCol)
+              .text(grp.name.toUpperCase());
+
+            // Bracket line under group header
+            const bracketY = groupHeaderY + 8;
+            svg.append('line')
+              .attr('x1', leftMargin + groupStartX + 4)
+              .attr('x2', leftMargin + groupStartX + groupW - 4)
+              .attr('y1', bracketY).attr('y2', bracketY)
+              .attr('stroke', mutedCol)
+              .attr('stroke-width', 0.8);
+          }
 
           colOffset += grp.targets.length;
         });
@@ -409,16 +415,16 @@
           .attr('y', (cellH - 1) / 2)
           .attr('text-anchor', 'middle')
           .attr('dominant-baseline', 'central')
-          .attr('font-size', Math.max(9, Math.min(12, cellW * 0.24)) + 'px')
+          .attr('font-size', Math.max(isMobile ? 7.5 : 9, Math.min(isMobile ? 10 : 12, cellW * 0.25)) + 'px')
           .attr('font-weight', d => Math.abs(d.r) > 0.4 ? '700' : '500')
           .attr('fill', d => textFill(d.r))
           .text(d => d.r.toFixed(2));
 
         // Significance markers
         cells.append('text')
-          .attr('x', cellW - 3).attr('y', 10)
+          .attr('x', cellW - 2).attr('y', isMobile ? 8 : 10)
           .attr('text-anchor', 'end')
-          .attr('font-size', '11px')
+          .attr('font-size', isMobile ? '8px' : '11px')
           .attr('font-weight', '700')
           .attr('fill', d => Math.abs(d.r) > 0.45 ? 'rgba(255,255,255,0.8)' : mutedCol)
           .text(d => d.p < 0.001 ? '***' : d.p < 0.01 ? '**' : d.p < 0.05 ? '*' : '');
@@ -428,15 +434,21 @@
         PREDICTORS.forEach((pred, i) => {
           const labelG = gLabels.append('g')
             .style('cursor', 'help');
+          const labelText = isMobile
+            ? pred.label
+              .replace('Input ', 'In ')
+              .replace('Output ', 'Out ')
+              .replace('Improvement %', 'Δ%')
+            : pred.label;
 
           labelG.append('text')
             .attr('x', 0).attr('y', rowY(i) + cellH / 2)
             .attr('text-anchor', 'end')
             .attr('dominant-baseline', 'central')
-            .attr('font-size', '11px')
+            .attr('font-size', isMobile ? '10px' : '11px')
             .attr('fill', textCol)
             .attr('font-weight', '500')
-            .text(pred.label);
+            .text(labelText);
 
           // Hit area
           labelG.append('rect')
@@ -470,9 +482,9 @@
 
           labelG.append('text')
             .attr('x', 0).attr('y', 0)
-            .attr('transform', 'rotate(-55)')
+            .attr('transform', `rotate(${isMobile ? -62 : -55})`)
             .attr('text-anchor', 'start')
-            .attr('font-size', '10px')
+            .attr('font-size', isMobile ? '8px' : '10px')
             .attr('fill', textCol)
             .attr('font-weight', tgt.isAgg ? '700' : '400')
             .text(tgt.label);
@@ -501,51 +513,52 @@
           }
         });
 
-        // --- Predictor group labels (vertical) ---
-        const dclmCenterY = topMargin + (rowY(0) + rowY(DCLM_COUNT - 1) + cellH) / 2;
-        const eduCenterY = topMargin + (rowY(DCLM_COUNT) + rowY(PREDICTORS.length - 1) + cellH) / 2;
-        const groupLabelX = 14;
-
-        const GROUP_DESC = {
-          'DCLM': 'DCLM score rates text quality on a 0–1 scale using a fastText classifier trained to distinguish curated, high-quality web data from random web crawls.',
-          'EDU': 'FineWeb-Edu score rates educational value on a 0–5 scale using a classifier trained on LLM-annotated web pages, where higher scores indicate more instructive content.',
-        };
-
-        [['DCLM', dclmCenterY], ['EDU', eduCenterY]].forEach(([text, cy]) => {
-          const labelG = svg.append('g').style('cursor', 'help');
-
-          labelG.append('text')
-            .attr('x', groupLabelX).attr('y', cy)
-            .attr('text-anchor', 'middle')
-            .attr('dominant-baseline', 'central')
-            .attr('font-size', '9px')
-            .attr('font-weight', '700')
-            .attr('letter-spacing', '1px')
-            .attr('fill', isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.3)')
-            .attr('transform', `rotate(-90, ${groupLabelX}, ${cy})`)
-            .text(text);
-
-          // Hit area for the rotated text
-          const halfH = (DCLM_COUNT * cellH) / 2;
-          labelG.append('rect')
-            .attr('x', 0).attr('y', cy - halfH)
-            .attr('width', 24).attr('height', halfH * 2)
-            .attr('fill', 'transparent');
+        if (!isMobile) {
+          // --- Predictor group labels (vertical) ---
+          const dclmCenterY = topMargin + (rowY(0) + rowY(DCLM_COUNT - 1) + cellH) / 2;
+          const eduCenterY = topMargin + (rowY(DCLM_COUNT) + rowY(PREDICTORS.length - 1) + cellH) / 2;
+          const groupLabelX = 14;
+
+          const GROUP_DESC = {
+            'DCLM': 'DCLM score rates text quality on a 0–1 scale using a fastText classifier trained to distinguish curated, high-quality web data from random web crawls.',
+            'EDU': 'FineWeb-Edu score rates educational value on a 0–5 scale using a classifier trained on LLM-annotated web pages, where higher scores indicate more instructive content.',
+          };
+
+          [['DCLM', dclmCenterY], ['EDU', eduCenterY]].forEach(([text, cy]) => {
+            const labelG = svg.append('g').style('cursor', 'help');
+
+            labelG.append('text')
+              .attr('x', groupLabelX).attr('y', cy)
+              .attr('text-anchor', 'middle')
+              .attr('dominant-baseline', 'central')
+              .attr('font-size', '9px')
+              .attr('font-weight', '700')
+              .attr('letter-spacing', '1px')
+              .attr('fill', isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.3)')
+              .attr('transform', `rotate(-90, ${groupLabelX}, ${cy})`)
+              .text(text);
+
+            // Hit area for the rotated text
+            const halfH = (DCLM_COUNT * cellH) / 2;
+            labelG.append('rect')
+              .attr('x', 0).attr('y', cy - halfH)
+              .attr('width', 24).attr('height', halfH * 2)
+              .attr('fill', 'transparent');
 
-          labelG.on('mouseenter', function() {
-            tip.innerHTML = `<div style="font-weight:700;font-size:13px;margin-bottom:4px;">${text} Score</div><div style="font-size:12px;color:var(--muted-color);line-height:1.45;">${GROUP_DESC[text]}</div>`;
-            tip.style.opacity = '1';
-          })
-          .on('mousemove', function(ev) {
-            const [mx, my] = d3.pointer(ev, container);
-            const bw = tip.offsetWidth || 260;
-            tip.style.transform = `translate(${Math.round(mx + 12)}px,${Math.round(my + 14)}px)`;
-          })
-          .on('mouseleave', function() {
-            tip.style.opacity = '0';
-            tip.style.transform = 'translate(-9999px,-9999px)';
+            labelG.on('mouseenter', function() {
+              tip.innerHTML = `<div style="font-weight:700;font-size:13px;margin-bottom:4px;">${text} Score</div><div style="font-size:12px;color:var(--muted-color);line-height:1.45;">${GROUP_DESC[text]}</div>`;
+              tip.style.opacity = '1';
+            })
+            .on('mousemove', function(ev) {
+              const [mx, my] = d3.pointer(ev, container);
+              tip.style.transform = `translate(${Math.round(mx + 12)}px,${Math.round(my + 14)}px)`;
+            })
+            .on('mouseleave', function() {
+              tip.style.opacity = '0';
+              tip.style.transform = 'translate(-9999px,-9999px)';
+            });
           });
-        });
+        }
 
         // --- Tooltip interactions ---
         cells.on('mouseenter', function(ev, d) {
@@ -603,7 +616,7 @@
           <span class="item"><span class="swatch" style="background:${sw(0)};"></span><span>ρ = 0</span></span>
           <span class="item"><span class="swatch" style="background:${sw(0.3)};"></span><span>ρ = +0.3</span></span>
           <span class="item"><span class="swatch" style="background:${sw(0.6)};"></span><span>ρ = +0.6</span></span>
-          <span style="margin-left:12px;font-size:11px;color:var(--muted-color);">*** p&lt;0.001 &nbsp; ** p&lt;0.01 &nbsp; * p&lt;0.05</span>
+          <span style="display:block;width:100%;margin-top:4px;font-size:11px;color:var(--muted-color);">*** p&lt;0.001 &nbsp; ** p&lt;0.01 &nbsp; * p&lt;0.05</span>
         </div>`;
       container.appendChild(legend);
     }

app/src/content/embeds/score-shift.html

@@ -172,6 +172,7 @@
 
       function render() {
         const width = container.clientWidth || 800;
+        const isMobile = width < 640;
         const height = Math.max(420, Math.round(width / 1.8));
         svg.attr('width', width).attr('height', height);
         const iw = width - margin.left - margin.right;
@@ -183,16 +184,16 @@
         const diffKey = currentMode === 'dclm' ? 'dclmDiff' : 'eduDiff';
 
         // Three column positions
-        const colPad = Math.max(50, iw * 0.08);
+        const colPad = isMobile ? Math.max(18, iw * 0.04) : Math.max(50, iw * 0.08);
         const colX = [
           margin.left + colPad,
           margin.left + iw / 2,
           width - margin.right - colPad
         ];
         const colLabels = [
-          `Input ${mode.label}`,
-          `Output ${mode.label}`,
-          'agg_score_macro'
+          isMobile ? 'Input' : `Input ${mode.label}`,
+          isMobile ? 'Output' : `Output ${mode.label}`,
+          isMobile ? 'Macro' : 'agg_score_macro'
         ];
 
         // Scales for each column (all vertical, higher = better at top)
@@ -228,7 +229,7 @@
 
           // Ticks
           const scale = scales[ci];
-          const ticks = scale.ticks(6);
+          const ticks = scale.ticks(isMobile ? 4 : 6);
           const fmt = ci === 2 ? d3.format('.3f') : d3.format('.2f');
           ticks.forEach(t => {
             const y = scale(t);
@@ -239,7 +240,7 @@
             gGrid.append('text')
               .attr('x', cx - 8).attr('y', y)
               .attr('text-anchor', 'end').attr('dominant-baseline', 'central')
-              .attr('fill', 'var(--tick-color)').attr('font-size', '12px')
+              .attr('fill', 'var(--tick-color)').attr('font-size', isMobile ? '10px' : '12px')
               .text(fmt(t));
           });
 
@@ -247,7 +248,7 @@
           gGrid.append('text')
             .attr('x', cx).attr('y', margin.top - 12)
             .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)')
-            .attr('font-size', '14px').attr('font-weight', '700')
+            .attr('font-size', isMobile ? '11px' : '14px').attr('font-weight', '700')
             .text(colLabels[ci]);
         });