fix chart responsiveness

app/src/content/embeds/against-baselines-deduplicated.html

@@ -330,6 +330,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         // Update clip rect to match inner plotting area with padding so
         // first/last markers are not clipped at the edges
         const clipPad = Math.max(6, Math.ceil(markerSize * 2));
@@ -368,6 +382,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -375,9 +399,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)

app/src/content/embeds/against-baselines.html

@@ -328,6 +328,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -365,6 +379,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -372,9 +396,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)

app/src/content/embeds/all-ratings.html

@@ -318,6 +318,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -347,6 +361,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +378,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -415,6 +440,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/filters-quad.html

@@ -202,6 +202,18 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
+        // Mobile tick formatter: 2k/2.5k instead of 2,000
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
+        if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : d3.format('.2f'));
         gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
         gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
@@ -452,6 +464,36 @@
             }
           } catch {}
         }
+
+        // Mobile layout: legend above controls and full-width stacks
+        function adjustGlobalLayout(){
+          try {
+            const rect = host.getBoundingClientRect();
+            const isMobile = rect && rect.width < 640;
+            const ctrl = host.querySelector('.filters-quad__controls');
+            const legend = host.querySelector('.filters-quad__legend');
+            if (!ctrl || !legend) return;
+            if (isMobile) {
+              if (legend.nextElementSibling !== ctrl) {
+                host.insertBefore(legend, ctrl);
+              }
+              ctrl.style.justifyContent = 'flex-start';
+              legend.style.justifyContent = 'flex-start';
+              ctrl.style.width = '100%';
+              legend.style.width = '100%';
+            } else {
+              if (ctrl.nextElementSibling !== legend) {
+                host.insertBefore(ctrl, legend);
+              }
+              ctrl.style.justifyContent = '';
+              legend.style.justifyContent = '';
+              ctrl.style.width = '';
+              legend.style.width = '';
+            }
+          } catch {}
+        }
+        adjustGlobalLayout();
+        if (window.ResizeObserver) { const ro = new ResizeObserver(()=>adjustGlobalLayout()); ro.observe(host); }
       })();
     };
 

app/src/content/embeds/formatting-filters.html

@@ -318,6 +318,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -347,6 +361,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +378,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)

app/src/content/embeds/image-correspondence-filters.html

@@ -318,6 +318,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -347,6 +361,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +378,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -415,6 +440,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/internal-deduplication.html

@@ -360,6 +360,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -367,9 +377,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -428,6 +439,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/relevance-filters.html

@@ -318,6 +318,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -347,6 +361,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +378,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -415,6 +440,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/remove-ch.html

@@ -321,6 +321,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -350,6 +364,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -357,9 +381,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -418,6 +443,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/s25-ratings.html

@@ -347,6 +347,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +364,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -376,6 +387,20 @@
             g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
           });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         // Axis labels (X and Y)
         gAxes.append('text')
           .attr('class', 'axis-label axis-label--x')

app/src/content/embeds/ss-vs-s1.html

@@ -318,6 +318,20 @@
           }
         } catch {}
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
@@ -347,6 +361,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -354,9 +378,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -415,6 +440,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }
 

app/src/content/embeds/visual-dependency-filters.html

@@ -360,6 +360,16 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isMobileTicks = width < 640;
+        const tfMobile = (d) => {
+          const abs = Math.abs(d);
+          if (abs >= 1000) {
+            const v = d / 1000;
+            const out = Math.abs(v) >= 10 ? Math.round(v) : +v.toFixed(1);
+            return out + 'k';
+          }
+          return d3.format('d')(d);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -367,9 +377,10 @@
           const xTicks = [];
           for (let v = start; v <= end; v += 1000) xTicks.push(v);
           if (xTicks.length === 0) xTicks.push(Math.round(dx0));
-          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(isMobileTicks ? tfMobile : d3.format('d'));
         } else {
           xAxis = xAxis.ticks(8);
+          if (isMobileTicks) xAxis = xAxis.tickFormat(tfMobile);
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)
@@ -428,6 +439,20 @@
           color: 'var(--text-color)'
         });
 
+        // Mobile layout: stack legend above select, allow legend to take full width
+        try {
+          const isMobile = width < 640;
+          if (controls && controls.style && labelMetric && labelMetric.style) {
+            controls.style.flexDirection = isMobile ? 'column' : 'row';
+            controls.style.alignItems = isMobile ? 'flex-start' : 'center';
+            labelMetric.style.marginLeft = isMobile ? '0' : 'auto';
+            if (legendInline && legendInline.style) {
+              legendInline.style.width = isMobile ? '100%' : '';
+              legendInline.style.justifyContent = isMobile ? 'flex-start' : '';
+            }
+          }
+        } catch {}
+
         return { innerWidth, innerHeight };
       }