From 041557c8858a2913920f3870602e7f5578b396ef Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Mon, 9 Mar 2026 11:52:42 +0100
Subject: [PATCH] UI: Avatar entfernt, Streaming-Topbar mit Labels

- DK-Avatar aus Header entfernt (kein Zweck)
- Streaming-Felder haben jetzt Ueberschriften: Name, Titel, Passwort, Qualitaet
- Passwort-Feld von 140px auf 180px verbreitert
- Topbar aligned an Feldunterkante (flex-end)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/App.tsx                            |  1 -
 web/src/plugins/streaming/StreamingTab.tsx | 77 ++++++++++++----------
 web/src/plugins/streaming/streaming.css    | 24 ++++++-
 3 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index e87ee2b..9c2f9ae 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -272,7 +272,6 @@ export default function App() {
             {'\u{1F511}'}
             {adminLoggedIn && <span className="hub-admin-green-dot" />}
           </button>
-          <div className="hub-avatar">DK</div>
         </div>
       </header>
 
diff --git a/web/src/plugins/streaming/StreamingTab.tsx b/web/src/plugins/streaming/StreamingTab.tsx
index d23a342..b34762f 100644
--- a/web/src/plugins/streaming/StreamingTab.tsx
+++ b/web/src/plugins/streaming/StreamingTab.tsx
@@ -719,39 +719,50 @@ export default function StreamingTab({ data, isAdmin: isAdminProp = false }: { d
       )}
 
       <div className="stream-topbar">
-        <input
-          className="stream-input stream-input-name"
-          placeholder="Dein Name"
-          value={userName}
-          onChange={e => setUserName(e.target.value)}
-          disabled={isBroadcasting}
-        />
-        <input
-          className="stream-input stream-input-title"
-          placeholder="Stream-Titel"
-          value={streamTitle}
-          onChange={e => setStreamTitle(e.target.value)}
-          disabled={isBroadcasting}
-        />
-        <input
-          className="stream-input stream-input-password"
-          type="password"
-          placeholder="Passwort (optional)"
-          value={streamPassword}
-          onChange={e => setStreamPassword(e.target.value)}
-          disabled={isBroadcasting}
-        />
-        <select
-          className="stream-select-quality"
-          value={qualityIdx}
-          onChange={e => setQualityIdx(Number(e.target.value))}
-          disabled={isBroadcasting}
-          title="Stream-Qualität"
-        >
-          {QUALITY_PRESETS.map((p, i) => (
-            <option key={p.label} value={i}>{p.label}</option>
-          ))}
-        </select>
+        <label className="stream-field">
+          <span className="stream-field-label">Name</span>
+          <input
+            className="stream-input stream-input-name"
+            placeholder="Dein Name"
+            value={userName}
+            onChange={e => setUserName(e.target.value)}
+            disabled={isBroadcasting}
+          />
+        </label>
+        <label className="stream-field stream-field-grow">
+          <span className="stream-field-label">Titel</span>
+          <input
+            className="stream-input stream-input-title"
+            placeholder="Stream-Titel"
+            value={streamTitle}
+            onChange={e => setStreamTitle(e.target.value)}
+            disabled={isBroadcasting}
+          />
+        </label>
+        <label className="stream-field">
+          <span className="stream-field-label">Passwort</span>
+          <input
+            className="stream-input stream-input-password"
+            type="password"
+            placeholder="optional"
+            value={streamPassword}
+            onChange={e => setStreamPassword(e.target.value)}
+            disabled={isBroadcasting}
+          />
+        </label>
+        <label className="stream-field">
+          <span className="stream-field-label">Qualit{'\u00E4'}t</span>
+          <select
+            className="stream-select-quality"
+            value={qualityIdx}
+            onChange={e => setQualityIdx(Number(e.target.value))}
+            disabled={isBroadcasting}
+          >
+            {QUALITY_PRESETS.map((p, i) => (
+              <option key={p.label} value={i}>{p.label}</option>
+            ))}
+          </select>
+        </label>
         {isBroadcasting ? (
           <button className="stream-btn stream-btn-stop" onClick={stopBroadcast}>
             {'\u23F9'} Stream beenden
diff --git a/web/src/plugins/streaming/streaming.css b/web/src/plugins/streaming/streaming.css
index 319bdae..0b9fe54 100644
--- a/web/src/plugins/streaming/streaming.css
+++ b/web/src/plugins/streaming/streaming.css
@@ -9,12 +9,27 @@
 /* ── Top Bar ── */
 .stream-topbar {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: 10px;
   margin-bottom: 16px;
   flex-wrap: wrap;
 }
 
+.stream-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.stream-field-grow { flex: 1; min-width: 180px; }
+.stream-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+  padding-left: 2px;
+}
+
 .stream-input {
   padding: 10px 14px;
   border: 1px solid var(--bg-tertiary);
@@ -25,11 +40,13 @@
   outline: none;
   transition: border-color var(--transition);
   min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
 }
 .stream-input:focus { border-color: var(--accent); }
 .stream-input::placeholder { color: var(--text-faint); }
 .stream-input-name { width: 150px; }
-.stream-input-title { flex: 1; min-width: 180px; }
+.stream-input-title { width: 100%; }
 
 .stream-btn {
   padding: 10px 20px;
@@ -408,11 +425,12 @@
 
 /* ── Password input in topbar ── */
 .stream-input-password {
-  width: 140px;
+  width: 180px;
 }
 
 .stream-select-quality {
   width: 200px;
+  box-sizing: border-box;
   padding: 10px 14px;
   border: 1px solid var(--bg-tertiary);
   border-radius: var(--radius);