Soundboard: remove grid size slider, move Verbunden to toolbar

Grid size slider removed (default 110px kept). Connection indicator
moved from topbar-right into the toolbar where the slider was.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/plugins/soundboard/SoundboardTab.tsx

@@ -343,7 +343,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
 
   /* ── Preferences ── */
   const [favs, setFavs] = useState<Record<string, boolean>>({});
-  const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110'));
 
   /* ── Party ── */
   const [chaosMode, setChaosMode] = useState(false);
@@ -477,18 +476,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /* ── Card size (scoped to .sb-app container) ── */
-  const sbAppRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const el = sbAppRef.current;
-    if (!el) return;
-    el.style.setProperty('--card-size', cardSize + 'px');
-    const ratio = cardSize / 110;
-    el.style.setProperty('--card-emoji', Math.round(28 * ratio) + 'px');
-    el.style.setProperty('--card-font', Math.max(9, Math.round(11 * ratio)) + 'px');
-    localStorage.setItem('jb-card-size', String(cardSize));
-  }, [cardSize]);
-
   /* ── SSE via props.data instead of own EventSource ── */
   useEffect(() => {
     if (!data) return;
@@ -803,7 +790,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
      RENDER
      ════════════════════════════════════════════ */
   return (
-    <div className="sb-app" ref={sbAppRef}>
+    <div className="sb-app">
       {chaosMode && <div className="party-overlay active" />}
 
       {/* ═══ TOPBAR ═══ */}
@@ -862,15 +849,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
               <span className="np-label">Last Played:</span> <span className="np-name">{lastPlayed}</span>
             </div>
           )}
-          {selected && (
-            <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
-              <span className="conn-dot" />
-              Verbunden
-              {voiceStats?.voicePing != null && (
-                <span className="conn-ping">{voiceStats.voicePing}ms</span>
-              )}
-            </div>
-          )}
         </div>
       </header>
 
@@ -1001,17 +979,15 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
           Stop
         </button>
 
-        <div className="size-control" title="Button-Groesse">
+        {selected && (
-          <span className="material-icons sc-icon">grid_view</span>
+          <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
-          <input
+            <span className="conn-dot" />
-            type="range"
+            Verbunden
-            className="size-slider"
+            {voiceStats?.voicePing != null && (
-            min={80}
+              <span className="conn-ping">{voiceStats.voicePing}ms</span>
-            max={160}
+            )}
-            value={cardSize}
-            onChange={e => setCardSize(parseInt(e.target.value))}
-          />
           </div>
+        )}
 
       </div>
 

web/src/plugins/soundboard/soundboard.css

@@ -598,56 +598,6 @@
   border-color: var(--red);
 }
 
-/* ── Size Slider ── */
-.size-control {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 4px;
-  background: var(--bg-tertiary);
-  border: 1px solid rgba(255, 255, 255, .06);
-}
-
-.size-control .sc-icon {
-  font-size: 14px;
-  color: var(--text-faint);
-}
-
-.size-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 70px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--bg-modifier-selected);
-  outline: none;
-  cursor: pointer;
-}
-
-.size-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--accent);
-  cursor: pointer;
-  transition: transform var(--transition);
-}
-
-.size-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.3);
-}
-
-.size-slider::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: none;
-  cursor: pointer;
-}
-
 /* ── Theme Selector ── */
 .theme-selector {
   display: flex;
@@ -1626,7 +1576,6 @@
     order: -1;
   }
 
-  .size-control,
   .theme-selector {
     display: none;
   }