From 855cc4caf4f17479116ad2e1522712dd2ddaf6ae Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 29 Apr 2026 13:47:28 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20make=20'Alle=20zur=20Unit'=20button=20vi?=
 =?UTF-8?q?sible=20=E2=80=94=20full-width=20layout=20below=20word=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 studio-v2/app/vocabulary/page.tsx | 86 +++++++++++++++----------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/studio-v2/app/vocabulary/page.tsx b/studio-v2/app/vocabulary/page.tsx
index eec7366..c89f5cf 100644
--- a/studio-v2/app/vocabulary/page.tsx
+++ b/studio-v2/app/vocabulary/page.tsx
@@ -234,53 +234,12 @@ export default function VocabularyPage() {
               <div className="space-y-2">
                 {topics.map(topic => (
                   <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'}`}>
                         💡 {topic.topic} ({topic.word_count})
                       </span>
-                      <div className="flex gap-2">
-                        <button
-                          onClick={async () => {
-                            setIsSearching(true)
-                            const topicWords: VocabWord[] = []
-                            for (const w of topic.words) {
-                              const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
-                              if (r.ok) {
-                                const d = await r.json()
-                                if (d.words?.[0]) topicWords.push(d.words[0])
-                              }
-                            }
-                            setResults(topicWords)
-                            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'}`}
-                        >
-                          Anzeigen
-                        </button>
-                        <button
-                          onClick={async () => {
-                            setIsSearching(true)
-                            const topicWords: VocabWord[] = []
-                            for (const w of topic.words) {
-                              const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
-                              if (r.ok) {
-                                const d = await r.json()
-                                if (d.words?.[0] && !selectedWords.find(s => s.id === d.words[0].id)) {
-                                  topicWords.push(d.words[0])
-                                }
-                              }
-                            }
-                            setSelectedWords(prev => [...prev, ...topicWords])
-                            setResults(topicWords)
-                            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'}`}
-                        >
-                          Alle zur Unit
-                        </button>
-                      </div>
                     </div>
-                    <div className="flex flex-wrap gap-1">
+                    <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>
                       ))}
@@ -288,6 +247,47 @@ export default function VocabularyPage() {
                         <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">
+                      <button
+                        onClick={async () => {
+                          setIsSearching(true)
+                          const topicWords: VocabWord[] = []
+                          for (const w of topic.words) {
+                            const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
+                            if (r.ok) {
+                              const d = await r.json()
+                              if (d.words?.[0]) topicWords.push(d.words[0])
+                            }
+                          }
+                          setResults(topicWords)
+                          setIsSearching(false)
+                        }}
+                        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
+                      </button>
+                      <button
+                        onClick={async () => {
+                          setIsSearching(true)
+                          const topicWords: VocabWord[] = []
+                          for (const w of topic.words) {
+                            const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
+                            if (r.ok) {
+                              const d = await r.json()
+                              if (d.words?.[0] && !selectedWords.find(s => s.id === d.words[0].id)) {
+                                topicWords.push(d.words[0])
+                              }
+                            }
+                          }
+                          setSelectedWords(prev => [...prev, ...topicWords])
+                          setResults(topicWords)
+                          setIsSearching(false)
+                        }}
+                        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
+                      </button>
+                    </div>
                   </div>
                 ))}
               </div>