From e3e341be6b7b9b84cb7d888afeba8bbde98b4935 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 02:09:36 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20Grid-Layout=20zu=20flexibler=20Reihe?=
 =?UTF-8?q?=20ge=C3=A4ndert=20-=20Sounds=20stehen=20nacheinander=20mit=20a?=
 =?UTF-8?q?utomatischem=20Umbruch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index c919460..9bb7c88 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -323,7 +323,7 @@ export default function App() {
         {error && <div className="error">{error}</div>}
         {info && <div className="badge" style={{ background:'rgba(34,197,94,.18)', borderColor:'rgba(34,197,94,.35)' }}>{info}</div>}
 
-        <main className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+        <main className="flex flex-wrap gap-3">
           {(activeFolder === '__favs__' ? filtered.filter((s) => !!favs[s.relativePath ?? s.fileName]) : filtered).map((s) => {
             const key = `${s.relativePath ?? s.fileName}`;
             const isFav = !!favs[key];
@@ -337,7 +337,7 @@ export default function App() {
                     onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }}
                   />
                 )}
-                <div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer" onClick={()=>handlePlay(s.name, s.relativePath)}>
+                <div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer min-w-[200px] max-w-[300px]" onClick={()=>handlePlay(s.name, s.relativePath)}>
                   <span className="text-sm font-medium truncate pr-2">{s.name}</span>
                   <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     <button className="text-gray-400 hover:text-[var(--accent-blue)]" onClick={(e)=>{e.stopPropagation(); setFavs(prev=>({ ...prev, [key]: !prev[key] }));}}><span className="material-icons text-xl">{isFav?'star':'star_border'}</span></button>