Merge pull request #175 from RivianTrackr/claude/add-stats-share-image-qmNqS

Fix category pills overlapping top-rated callout in share image

Author: RivianTrackr

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the Rivian Tire Guide plugin will be documented in this f
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.21.1] - 2026-03-01
+
+### Fixed
+- **Share image: category pills overlapping top-rated callout** — The category pills and top-rated tire banner occupied the same vertical space when 5 brands were present. The callout Y-position is now computed dynamically from the bottom of both the stat cards and the categories section, and brand bar spacing was tightened to give categories more room.
+
 ## [1.21.0] - 2026-03-01
 
 ### Added

admin/js/admin-scripts.js

@@ -300,7 +300,7 @@
             brands.forEach(function(b) { if (b.count > maxBrandCount) maxBrandCount = b.count; });
 
             brands.forEach(function(brand, i) {
-                var barY = rightY + 35 + i * 38;
+                var barY = rightY + 35 + i * 32;
                 var barMaxW = 380;
                 var barW = Math.max(40, (brand.count / maxBrandCount) * barMaxW);
                 var barH = 26;
@@ -332,21 +332,23 @@
             });
 
             // "Categories" section below brands.
-            var catY = rightY + 35 + Math.max(brands.length, 1) * 38 + 25;
+            var catY = rightY + 35 + Math.max(brands.length, 1) * 32 + 20;
             ctx.fillStyle = colors.textHeading;
             ctx.font = 'bold 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
             ctx.textBaseline = 'top';
             ctx.fillText('Categories', rightX, catY);
 
             var cats = (data.categories || []).slice(0, 4);
-            var catStartY = catY + 32;
+            var catStartY = catY + 28;
+            var catMaxRow = 0;
             cats.forEach(function(cat, i) {
                 var chipX = rightX + i * 130;
                 // Wrap to second row if needed.
                 var row = 0;
                 if (i >= 3) { row = 1; chipX = rightX + (i - 3) * 130; }
+                if (row > catMaxRow) catMaxRow = row;
 
-                var tagY = catStartY + row * 36;
+                var tagY = catStartY + row * 34;
                 var tagText = cat.name + ' (' + cat.count + ')';
 
                 // Pill background.
@@ -365,8 +367,13 @@
             });
 
             // --- Top rated tire callout ---
+            // Position dynamically below both the left stat cards and right categories.
+            var leftBottom = gridStartY + 2 * (cardH + cardGap) - cardGap;
+            var rightBottom = cats.length > 0 ? catStartY + catMaxRow * 34 + 26 : catY + 18;
+            var contentBottom = Math.max(leftBottom, rightBottom);
+
             if (data.topTire) {
-                var calloutY = 440;
+                var calloutY = contentBottom + 15;
                 roundRect(ctx, 60, calloutY, W - 120, 60, 10);
                 ctx.fillStyle = colors.bgCard;
                 ctx.fill();