From afe7a983d19fad8a9904ac2bf90178c82c7cfae4 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Mon, 27 Apr 2026 19:26:53 +0200
Subject: [PATCH] Fix Match: Equal card heights + progress bar with count

All cards (EN/DE/native) now have min-h-[48px] for consistent height.
Progress bar shows "4/12" count next to the fill bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 studio-v2/app/learn/[unitId]/match/page.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/studio-v2/app/learn/[unitId]/match/page.tsx b/studio-v2/app/learn/[unitId]/match/page.tsx
index 2eac9d5..b562b36 100644
--- a/studio-v2/app/learn/[unitId]/match/page.tsx
+++ b/studio-v2/app/learn/[unitId]/match/page.tsx
@@ -148,9 +148,16 @@ export default function MatchPage() {
         </div>
       </div>
 
-      {/* Progress bar */}
-      <div className="w-full h-1.5 bg-white/10">
-        <div className="h-full bg-gradient-to-r from-indigo-500 to-violet-500 transition-all" style={{ width: `${(matchedTotal / Math.max(totalPairs, 1)) * 100}%` }} />
+      {/* Progress bar with count */}
+      <div className="max-w-3xl mx-auto w-full px-6 pt-3">
+        <div className="flex items-center gap-3">
+          <div className={`flex-1 h-2 rounded-full ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
+            <div className="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500 transition-all" style={{ width: `${(matchedTotal / Math.max(totalPairs, 1)) * 100}%` }} />
+          </div>
+          <span className={`text-xs font-medium tabular-nums ${isDark ? 'text-white/50' : 'text-slate-400'}`}>
+            {matchedTotal}/{totalPairs}
+          </span>
+        </div>
       </div>
 
       {/* Native flash overlay */}
@@ -208,7 +215,7 @@ export default function MatchPage() {
                 {roundItems.map(item => (
                   <div
                     key={`l-${item.id}`}
-                    className={`flex items-center gap-2 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
+                    className={`flex items-center gap-2 p-3 min-h-[48px] rounded-xl border-2 text-sm font-medium transition-all ${
                       matched.has(item.id)
                         ? 'opacity-30 border-green-400 bg-green-500/10'
                         : selectedLeft === item.id
@@ -235,7 +242,7 @@ export default function MatchPage() {
                 {shuffledRight.map(item => (
                   <div
                     key={`r-${item.id}`}
-                    className={`flex items-center gap-2 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
+                    className={`flex items-center gap-2 p-3 min-h-[48px] rounded-xl border-2 text-sm font-medium transition-all ${
                       matched.has(item.id)
                         ? 'opacity-30 border-green-400 bg-green-500/10'
                         : wrongPair === item.id
@@ -265,7 +272,7 @@ export default function MatchPage() {
                     return (
                       <div
                         key={`n-${item.id}`}
-                        className={`flex items-center gap-2 p-3 rounded-xl border text-sm transition-all ${
+                        className={`flex items-center gap-2 p-3 min-h-[48px] rounded-xl border text-sm transition-all ${
                           matched.has(item.id)
                             ? 'opacity-30 border-green-400/30 bg-green-500/5'
                             : selectedLeft === item.id