Fix axis label/title collisions in Element Attention Analysis chart

The rotated Y-axis title sat too close to the plot's left edge (a wide
first column would butt right up against it), and the rotated X-axis
labels' diagonal tails could reach into the X-axis title text below
them. Grows the canvas by the same amount the margins grow (so the
plotted area itself doesn't shrink), widens padLeft/padBottom, and
trims the label truncation length slightly for extra safety margin.
Verified pixel-level on a 46-element session: 9px+ clear gap on both
axes, no overlap in either Line or Column mode.

analysis.py

@@ -1363,14 +1363,22 @@ function showToast(message, isError, onRetry){
 
   function layout(){
     const containerW = scrollBox.clientWidth || 320;
-    const needed = 96 + points.length * MIN_SLOT;
+    const needed = 120 + points.length * MIN_SLOT;
     cv.width = Math.max(containerW, needed);
-    cv.height = inFullscreen() ? Math.max(420, Math.round(window.innerHeight * 0.6)) : 360;
+    cv.height = inFullscreen() ? Math.max(460, Math.round(window.innerHeight * 0.6)) : 400;
     hint.style.display = needed > containerW ? 'block' : 'none';
   }
 
+  // Padding is dedicated margin *around* the plot, not carved out of it —
+  // cv.height/width already grew by the same amount (see layout()) so the
+  // plotted area itself doesn't shrink. padLeft needs enough room for the
+  // rotated Y-axis title + tick labels before the first point; padBottom
+  // needs enough room for the diagonally-rotated X-axis labels *and* a
+  // clear gap before the X-axis title below them — otherwise the title and
+  // the longest labels' diagonal tails collide, and a wide first column
+  // butts right up against the Y-axis title.
   function geometry(){
-    const padLeft = 62, padRight = 34, padTop = 30, padBottom = 68;
+    const padLeft = 84, padRight = 34, padTop = 30, padBottom = 108;
     const plotW = cv.width - padLeft - padRight;
     const plotH = cv.height - padTop - padBottom;
     const dataMax = Math.max.apply(null, points.map(p => p.seconds)) || 1;
@@ -1493,7 +1501,7 @@ function showToast(message, isError, onRetry){
       ctx.fillStyle = isHover ? strong : dim;
       ctx.font = isHover ? '600 10.5px -apple-system, Arial' : '10.5px -apple-system, Arial';
       ctx.textAlign = 'right';
-      const label = pt.p.name.length > 24 ? pt.p.name.slice(0, 23) + '…' : pt.p.name;
+      const label = pt.p.name.length > 20 ? pt.p.name.slice(0, 19) + '…' : pt.p.name;
       ctx.fillText(label, 0, 0);
       ctx.restore();
     });
@@ -1505,13 +1513,14 @@ function showToast(message, isError, onRetry){
     ctx.lineTo(cv.width - g.padRight, g.padTop + g.plotH);
     ctx.stroke();
 
-    // axis titles
+    // axis titles — drawn last, in their own dedicated margin below/left of
+    // everything else (see the padLeft/padBottom comment on geometry())
     ctx.fillStyle = faint;
     ctx.font = '600 10px -apple-system, Arial';
     ctx.textAlign = 'center';
-    ctx.fillText('WEBPAGE ELEMENTS (' + pts.length + ')', g.padLeft + g.plotW / 2, cv.height - 8);
+    ctx.fillText('WEBPAGE ELEMENTS (' + pts.length + ')', g.padLeft + g.plotW / 2, cv.height - 14);
     ctx.save();
-    ctx.translate(16, g.padTop + g.plotH / 2);
+    ctx.translate(20, g.padTop + g.plotH / 2);
     ctx.rotate(-Math.PI / 2);
     ctx.fillText('GAZE ATTENTION (SEC)', 0, 0);
     ctx.restore();