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

Fix: Explanation card visible + visual divider between 2/3 and 1/3

Browse Source 
- exerciseType prop for correct explanation lookup (was using title)
- Vertical divider line between work area and native helper
- Cyan-tinted explanation card with lightbulb icon
- Padding between sections (pr-6 / pl-6 around divider)
- Explanation card has distinct background for visibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-27 23:07:57 +02:00
parent 82f5b4fbba
commit 91d6918e2c
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
studio-v2/components/learn/ExerciseLayout.tsx
View File

@@ -11,6 +11,8 @@ interface ExerciseLayoutProps {
nativeHelper?: React.ReactNode
/** Explanation text for parents (shown above native words) */
exerciseExplanation?: string
/** Exercise type key for auto-explanation lookup (e.g. 'match', 'flashcards') */
exerciseType?: string
/** Title for the exercise in the header */
title: string
/** Progress: current / total */
@@ -50,6 +52,7 @@ export function ExerciseLayout({
children,
nativeHelper,
exerciseExplanation,
exerciseType,
title,
progress,
onBack,
@@ -62,9 +65,10 @@ export function ExerciseLayout({
? 'bg-white/10 backdrop-blur-xl border border-white/10'
: 'bg-white/80 backdrop-blur-xl border border-black/5'
const typeKey = exerciseType || title.toLowerCase()
const explanation = exerciseExplanation
|| explanations[title.toLowerCase()]?.[nativeLang]
|| explanations[title.toLowerCase()]?.['de']
|| explanations[typeKey]?.[nativeLang]
|| explanations[typeKey]?.['de']
|| ''
return (
@@ -100,23 +104,29 @@ export function ExerciseLayout({
{/* Main content: 2/3 left + 1/3 right */}
<div className="max-w-5xl mx-auto w-full px-6 py-6">
<div className={`flex gap-6 ${isThirdLanguage ? '' : ''}`}>
<div className="flex gap-0">
{/* Left: Exercise area (2/3 or full) */}
<div className={isThirdLanguage ? 'w-2/3' : 'w-full'}>
<div className={isThirdLanguage ? 'w-2/3 pr-6' : 'w-full'}>
{children}
</div>
{/* Divider line */}
{isThirdLanguage && (
<div className={`w-px self-stretch ${isDark ? 'bg-white/10' : 'bg-slate-200'}`} />
)}
{/* Right: Native language helper (1/3) — only for migrants */}
{isThirdLanguage && (
<div className="w-1/3">
<div className={`sticky top-20 space-y-4`}>
<div className="w-1/3 pl-6">
<div className="sticky top-20 space-y-4">
{/* Explanation card */}
{explanation && (
<div className={`${glassCard} rounded-2xl p-4`}>
<h3 className={`text-xs font-semibold mb-2 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
<div className={`rounded-2xl p-4 ${isDark ? 'bg-cyan-500/5 border border-cyan-400/20' : 'bg-cyan-50 border border-cyan-200'}`}>
<h3 className={`text-xs font-semibold mb-2 flex items-center gap-2 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
<span className="text-base">💡</span>
{nativeLang.toUpperCase()} · {t('english')} · {t('german')}
</h3>
<p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
<p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
{explanation}
</p>
</div>