Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Match: Equal card heights + progress bar with count

Browse Source 
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>
This commit is contained in:
Benjamin Admin
2026-04-27 19:26:53 +02:00
parent 6d54ee8178
commit afe7a983d1
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
studio-v2/app/learn/[unitId]/match/page.tsx
View File

@@ -148,9 +148,16 @@ export default function MatchPage() {
</div> </div>
</div> </div>
{/* Progress bar */} {/* Progress bar with count */}
<div className="w-full h-1.5 bg-white/10"> <div className="max-w-3xl mx-auto w-full px-6 pt-3">
<div className="h-full bg-gradient-to-r from-indigo-500 to-violet-500 transition-all" style={{ width: `${(matchedTotal / Math.max(totalPairs, 1)) * 100}%` }} /> <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> </div>
{/* Native flash overlay */} {/* Native flash overlay */}
@@ -208,7 +215,7 @@ export default function MatchPage() {
{roundItems.map(item => ( {roundItems.map(item => (
<div <div
key={`l-${item.id}`} 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) matched.has(item.id)
? 'opacity-30 border-green-400 bg-green-500/10' ? 'opacity-30 border-green-400 bg-green-500/10'
: selectedLeft === item.id : selectedLeft === item.id
@@ -235,7 +242,7 @@ export default function MatchPage() {
{shuffledRight.map(item => ( {shuffledRight.map(item => (
<div <div
key={`r-${item.id}`} 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) matched.has(item.id)
? 'opacity-30 border-green-400 bg-green-500/10' ? 'opacity-30 border-green-400 bg-green-500/10'
: wrongPair === item.id : wrongPair === item.id
@@ -265,7 +272,7 @@ export default function MatchPage() {
return ( return (
<div <div
key={`n-${item.id}`} 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) matched.has(item.id)
? 'opacity-30 border-green-400/30 bg-green-500/5' ? 'opacity-30 border-green-400/30 bg-green-500/5'
: selectedLeft === item.id : selectedLeft === item.id