From e3cca87bcc3622cf2a3c86c1fc6fe04c864af406 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Fri, 8 Aug 2025 23:57:50 +0200
Subject: [PATCH] =?UTF-8?q?UI:=20Fix=20Icon-Overlap=20endg=C3=BCltig=20=20?=
 =?UTF-8?q?gezielte=20Klasse=20'with-left-icon'=20+=20CSS=20padding-left,?=
 =?UTF-8?q?=20keine=20globalen=20Side-Effects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    |  6 +++---
 web/src/styles.css | 10 ++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 5a7afbb..adb68ae 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -159,7 +159,7 @@ export default function App() {
         <div className="control-panel rounded-xl p-6 mb-8">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-center">
             <div className="relative">
-              <input className="input-field pl-10" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} />
+              <input className="input-field pl-10 with-left-icon" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} />
               <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>search</span>
             </div>
             <div className="relative">
@@ -186,7 +186,7 @@ export default function App() {
               <span className="text-sm font-semibold w-8 text-center" style={{color:'var(--text-secondary)'}}>{Math.round(volume*100)}%</span>
             </div>
             <div className="relative md:col-span-2 lg:col-span-1">
-              <input className="input-field pl-10" placeholder="MP3 URL..." value={mediaUrl} onChange={(e)=>setMediaUrl(e.target.value)} onKeyDown={async (e)=>{ if(e.key==='Enter'){ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(err:any){ setInfo(null); setError(err?.message||'Download fehlgeschlagen'); } } }} />
+              <input className="input-field pl-10 with-left-icon" placeholder="MP3 URL..." value={mediaUrl} onChange={(e)=>setMediaUrl(e.target.value)} onKeyDown={async (e)=>{ if(e.key==='Enter'){ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(err:any){ setInfo(null); setError(err?.message||'Download fehlgeschlagen'); } } }} />
               <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>link</span>
               <button className="absolute right-0 top-0 h-full px-4 text-white flex items-center rounded-r-lg transition-all font-semibold" style={{background:'var(--accent-green)'}} onClick={async ()=>{ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(e:any){ setInfo(null); setError(e?.message||'Download fehlgeschlagen'); } }}>
                 <span className="material-icons text-sm mr-1">file_download</span>
@@ -210,7 +210,7 @@ export default function App() {
               {!isAdmin && (
                 <>
                   <div className="relative w-full sm:w-auto" style={{maxWidth:'15%'}}>
-                    <input className="input-field pl-10" placeholder="Admin Passwort" type="password" value={adminPwd} onChange={(e)=>setAdminPwd(e.target.value)} />
+                    <input className="input-field pl-10 with-left-icon" placeholder="Admin Passwort" type="password" value={adminPwd} onChange={(e)=>setAdminPwd(e.target.value)} />
                     <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>lock</span>
                   </div>
                   <button className="bg-gray-800 text-white hover:bg-black font-semibold py-2 px-5 rounded-lg transition-all w-full sm:w-auto" style={{maxWidth:'15%'}} onClick={async ()=>{ const ok=await adminLogin(adminPwd); if(ok){ setIsAdmin(true); setAdminPwd(''); } else alert('Login fehlgeschlagen'); }}>Login</button>
diff --git a/web/src/styles.css b/web/src/styles.css
index 04a0289..0e0c027 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -50,6 +50,9 @@ body {
 [data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
 .gradient-text { background: -webkit-linear-gradient(45deg, #333, #555); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
 
+/* Platz für linke Icons in allen Themes erzwingen */
+.input-field.pl-10 { padding-left: 2.5rem !important; }
+
 /* Rainbow Chaos Theme */
 [data-theme="rainbow"] body {
   background:
@@ -139,7 +142,7 @@ header p { opacity: .8; }
 }
 .control input, .control select {
   width: 100%;
-  padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
+  padding: 12px 14px; /* Standard ohne Icon */
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.25);
   background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
@@ -155,7 +158,7 @@ header p { opacity: .8; }
 .select-trigger {
   width: 100%;
   text-align: left;
-  padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
+  padding: 12px 14px; /* Standard ohne Icon */
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.32);
   background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
@@ -191,6 +194,9 @@ header p { opacity: .8; }
   backdrop-filter: blur(18px);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
 }
+
+/* Konkrete Felder mit Icons: zusätzliche linke Padding über Klasse steuern */
+.with-left-icon { padding-left: 40px !important; }
 .control.theme select option { background: #0f1530; color: #e7e7ee; }
 .control input::placeholder { color: #c8c8d8; }