first fix for mobile charts

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

@@ -317,6 +317,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -313,6 +313,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -310,6 +310,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -307,6 +307,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 

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

@@ -313,6 +313,17 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Responsive legend layout like against-baselines-deduplicated
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);