Fix: make 'Alle zur Unit' button visible — full-width layout below word tags
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 43s
CI / test-go-edu-search (push) Successful in 30s
CI / test-python-klausur (push) Failing after 2m37s
CI / test-python-agent-core (push) Successful in 19s
CI / test-nodejs-website (push) Successful in 26s

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-29 13:47:28 +02:00
parent c09fc6c7bc
commit 855cc4caf4

View File

@@ -234,10 +234,19 @@ export default function VocabularyPage() {
<div className="space-y-2"> <div className="space-y-2">
{topics.map(topic => ( {topics.map(topic => (
<div key={topic.topic} className={`${glassCard} rounded-xl p-3`}> <div key={topic.topic} className={`${glassCard} rounded-xl p-3`}>
<div className="flex items-center justify-between mb-2"> <div className="mb-2">
<span className={`text-sm font-semibold ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}> <span className={`text-sm font-semibold ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
💡 {topic.topic} ({topic.word_count}) 💡 {topic.topic} ({topic.word_count})
</span> </span>
</div>
<div className="flex flex-wrap gap-1 mb-3">
{(topic.display_words || topic.words).slice(0, 15).map((w: string, i: number) => (
<span key={i} className={`text-xs px-2 py-0.5 rounded-full ${isDark ? 'bg-white/5 text-white/50' : 'bg-slate-100 text-slate-500'}`}>{w}</span>
))}
{topic.words.length > 15 && (
<span className={`text-xs px-2 py-0.5 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>+{topic.words.length - 15}</span>
)}
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={async () => { onClick={async () => {
@@ -253,7 +262,7 @@ export default function VocabularyPage() {
setResults(topicWords) setResults(topicWords)
setIsSearching(false) setIsSearching(false)
}} }}
className={`text-xs px-3 py-1 rounded-lg ${isDark ? 'bg-white/10 text-white/60 hover:bg-white/20' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`} className={`flex-1 text-xs px-3 py-2 rounded-lg ${isDark ? 'bg-white/10 text-white/60 hover:bg-white/20' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
> >
Anzeigen Anzeigen
</button> </button>
@@ -274,21 +283,12 @@ export default function VocabularyPage() {
setResults(topicWords) setResults(topicWords)
setIsSearching(false) setIsSearching(false)
}} }}
className={`text-xs px-3 py-1 rounded-lg ${isDark ? 'bg-cyan-500/20 text-cyan-300 hover:bg-cyan-500/30' : 'bg-cyan-100 text-cyan-700 hover:bg-cyan-200'}`} className={`flex-1 text-xs px-3 py-2 rounded-lg font-semibold ${isDark ? 'bg-cyan-500/30 text-cyan-200 hover:bg-cyan-500/40 border border-cyan-400/30' : 'bg-cyan-100 text-cyan-700 hover:bg-cyan-200 border border-cyan-300'}`}
> >
Alle zur Unit Alle zur Unit
</button> </button>
</div> </div>
</div> </div>
<div className="flex flex-wrap gap-1">
{(topic.display_words || topic.words).slice(0, 15).map((w: string, i: number) => (
<span key={i} className={`text-xs px-2 py-0.5 rounded-full ${isDark ? 'bg-white/5 text-white/50' : 'bg-slate-100 text-slate-500'}`}>{w}</span>
))}
{topic.words.length > 15 && (
<span className={`text-xs px-2 py-0.5 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>+{topic.words.length - 15}</span>
)}
</div>
</div>
))} ))}
</div> </div>
)} )}