From e6957160f670edd273eebb364d9df97d44ee98c9 Mon Sep 17 00:00:00 2001
From: vadimwit <vadimwitted@gmail.com>
Date: Mon, 13 Jul 2026 16:31:54 +0100
Subject: [PATCH] feat(related): 2x2 grid for suggested progressions (task
 L-76)

The suggested-progressions panel lays its entries out as a 2x2 grid
(grid-cols-1 sm:grid-cols-2) instead of a vertical list, using the
left-column width and halving the block height. Layout-only: a grid
class + a render-time slice(0,4); the ranker, scoring, cap
(RELATED_MAX_ENTRIES=5), and every entry's chips/labels are untouched,
so the C-50 ranking pins stay green. Idle/empty states stay
single-column. Critic PASS (combined gate).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/RelatedProgressions.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/RelatedProgressions.jsx b/src/components/RelatedProgressions.jsx
index 39357d2..28a552e 100644
--- a/src/components/RelatedProgressions.jsx
+++ b/src/components/RelatedProgressions.jsx
@@ -413,8 +413,11 @@ export default function RelatedProgressions({ loop, keyInfo, onChordClick }) {
               Try these in {activeStyleLabel}
             </p>
           )}
-          <ul className="flex flex-col gap-2.5">
-            {primary.map(entry => (
+          {/* D-75 §4: 2-col grid to use the left column's width; display cap
+              4 for a clean 2×2 (render-time slice — RELATED_MAX_ENTRIES and the
+              ranker are untouched). Stacks to 1-col on narrow. */}
+          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+            {primary.slice(0, 4).map(entry => (
               <li key={`${entry.style}-${entry.id}`} className="min-w-0">
                 <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5">
                   <span className="text-sm font-semibold text-gray-100">{entry.name}</span>