update banner

app/src/content/embeds/banner.html

@@ -57,6 +57,64 @@
       container.style.position = container.style.position || 'relative';
       let tip = container.querySelector('.d3-tooltip');
       let tipInner;
+      const isMobileLayout = () => window.matchMedia('(max-width: 480px)').matches;
+      let tipVisible = false;
+      const positionTooltipWithinBounds = (mx, my) => {
+        if (!tip || isMobileLayout()) return;
+        const offsetX = 10, offsetY = 12;
+        const desiredX = Math.round(mx + offsetX);
+        const desiredY = Math.round(my + offsetY);
+        const tipWidth = tip.offsetWidth || 0;
+        const tipHeight = tip.offsetHeight || 0;
+        const maxX = Math.max(0, (container.clientWidth || 0) - tipWidth - 1);
+        const maxY = Math.max(0, (container.clientHeight || 0) - tipHeight - 1);
+        const clampedX = Math.max(0, Math.min(desiredX, maxX));
+        const clampedY = Math.max(0, Math.min(desiredY, maxY));
+        tip.style.transform = `translate(${clampedX}px, ${clampedY}px)`;
+      };
+      const applyTooltipLayout = () => {
+        if (!tip) return;
+        if (isMobileLayout()) {
+          Object.assign(tip.style, {
+            position: 'static',
+            transform: 'none',
+            margin: '12px auto 0',
+            maxWidth: 'min(420px, 92%)',
+            width: 'auto',
+            left: '0px',
+            top: '0px',
+            pointerEvents: 'auto'
+          });
+          tip.style.display = tipVisible ? 'block' : 'none';
+          tip.style.opacity = tipVisible ? '1' : '0';
+        } else {
+          Object.assign(tip.style, {
+            position: 'absolute',
+            opacity: '0',
+            transform: 'translate(-9999px, -9999px)',
+            margin: '0',
+            maxWidth: '',
+            width: '',
+            left: '0px',
+            top: '0px',
+            pointerEvents: 'none'
+          });
+          tip.style.display = 'block';
+        }
+      };
+      const applyContainerLayout = () => {
+        if (!container || !container.style) return;
+        container.style.flexDirection = isMobileLayout() ? 'column' : 'row';
+        // Optionally add a small gap for breathing space when stacked
+        container.style.gap = isMobileLayout() ? '10px' : '0px';
+        container.style.justifyContent = isMobileLayout() ? 'flex-start' : 'center';
+      };
+      const truncateText = (text, maxWords = 25) => {
+        if (!text || typeof text !== 'string') return '—';
+        const words = text.trim().split(/\s+/);
+        if (words.length <= maxWords) return text;
+        return words.slice(0, maxWords).join(' ') + '...';
+      };
       if (!tip) {
         tip = document.createElement('div');
         tip.className = 'd3-tooltip';
@@ -82,6 +140,8 @@
         tipInner.style.textAlign = 'left';
         tip.appendChild(tipInner);
         container.appendChild(tip);
+        applyTooltipLayout();
+        applyContainerLayout();
       } else {
         tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
       }
@@ -109,6 +169,25 @@
         });
         const firstId = data && data.length ? data[0].original_id : '0';
         const thumbBase = await resolveBase(CANDIDATE_BASES, `${firstId}.jpg`);
+        const updateTooltipContent = (d) => {
+          if (!d) return;
+          const imgSrc = `${thumbBase}${d.original_id}.jpg`;
+          const userText = truncateText(d.user);
+          const assistantText = truncateText(d.assistant);
+          const layoutAdjust = isMobileLayout() ? 'flex-direction:column; align-items:center;' : '';
+          tipInner.innerHTML =
+            `<div style="display:flex; gap:10px; align-items:flex-start; ${layoutAdjust}">` +
+              `<div style="width:120px;height:120px;flex:0 0 auto;border-radius:6px;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-bg);">` +
+                `<img src="${imgSrc}" alt="thumb ${d.original_id}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;" />` +
+              `</div>` +
+              `<div style="min-width:140px; max-width:200px;">` +
+                `<div><strong>${d.category || 'Unknown'}</strong></div>` +
+                `<div style="word-wrap:break-word; line-height:1.3; margin:4px 0;"><strong>Q:</strong> ${userText}</div>` +
+                `<div style="word-wrap:break-word; line-height:1.3; margin:4px 0;"><strong>A:</strong> ${assistantText}</div>` +
+                `<div><strong>Subset</strong> ${d.subset ?? '—'}</div>` +
+              `</div>` +
+            `</div>`;
+        };
 
         // Centroides par catégorie (moyenne x/y)
         const centroids = Array.from(
@@ -260,47 +339,34 @@
               .attr('stroke', (d) => pointStroke(d))
               .attr('stroke-width', 0.4)
               .on('mouseenter', function(ev, d) {
+                if (isMobileLayout()) { updateTooltipContent(d); return; }
                 d3.select(this).raise()
                   .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
                   .attr('stroke-width', 1.2);
-                const imgSrc = `${thumbBase}${d.original_id}.jpg`;
-                
-                // Function to truncate text to max 25 words
-                const truncateText = (text, maxWords = 25) => {
-                  if (!text || typeof text !== 'string') return '—';
-                  const words = text.trim().split(/\s+/);
-                  if (words.length <= maxWords) return text;
-                  return words.slice(0, maxWords).join(' ') + '...';
-                };
-                
-                const userText = truncateText(d.user);
-                const assistantText = truncateText(d.assistant);
-                
-                tipInner.innerHTML =
-                  `<div style="display:flex; gap:10px; align-items:flex-start;">` +
-                    `<div style="width:120px;height:120px;flex:0 0 auto;border-radius:6px;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-bg);">` +
-                      `<img src="${imgSrc}" alt="thumb ${d.original_id}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;" />` +
-                    `</div>` +
-                    `<div style="min-width:140px; max-width:200px;">` +
-                      `<div><strong>${d.category || 'Unknown'}</strong></div>` +
-                      `<div style="word-wrap:break-word; line-height:1.3; margin:4px 0;"><strong>Q:</strong> ${userText}</div>` +
-                      `<div style="word-wrap:break-word; line-height:1.3; margin:4px 0;"><strong>A:</strong> ${assistantText}</div>` +
-                      `<div><strong>Subset</strong> ${d.subset ?? '—'}</div>` +
-                    `</div>` +
-                  `</div>`;
+                updateTooltipContent(d);
                 tip.style.opacity = '1';
+                const [mx, my] = d3.pointer(ev, container);
+                positionTooltipWithinBounds(mx, my);
               })
               .on('mousemove', (ev) => {
+                if (isMobileLayout()) return;
                 const [mx, my] = d3.pointer(ev, container);
-                const offsetX = 10, offsetY = 12;
-                tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
+                positionTooltipWithinBounds(mx, my);
               })
               .on('mouseleave', function() {
+                if (isMobileLayout()) return;
                 tip.style.opacity = '0';
                 tip.style.transform = 'translate(-9999px, -9999px)';
                 d3.select(this)
                   .attr('stroke', (d) => pointStroke(d))
                   .attr('stroke-width', 0.4);
+              })
+              .on('click', function(ev, d) {
+                updateTooltipContent(d);
+                if (isMobileLayout()) {
+                  tipVisible = true;
+                  applyTooltipLayout();
+                }
               }),
             (update) => update
               .attr('cx', (d) => xScale(d.x_position))
@@ -311,13 +377,20 @@
               .attr('stroke', (d) => pointStroke(d))
               .attr('stroke-width', 0.4)
           );
+          // Ensure tooltip layout reflects current viewport
+          applyTooltipLayout();
+          applyContainerLayout();
         };
 
         if (window.ResizeObserver) {
-          const ro = new ResizeObserver(() => render());
+          const ro = new ResizeObserver(() => {
+            render();
+            applyTooltipLayout();
+            applyContainerLayout();
+          });
           ro.observe(container);
         } else {
-          window.addEventListener('resize', render);
+          window.addEventListener('resize', () => { render(); applyTooltipLayout(); applyContainerLayout(); });
         }
         // Re-render on theme changes (data-theme attribute updates live)
         const themeObserver = new MutationObserver((mutations) => {
@@ -330,6 +403,8 @@
         });
         themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
         render();
+        applyTooltipLayout();
+        applyContainerLayout();
       });
     };