feat(web): add button size toggle (S/M/L) in header

Adds a size selector in the header bar that allows users to choose
between Small, Medium, and Large sound buttons. Choice persists
via localStorage. Responsive breakpoints also respect the setting.

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

web/src/App.tsx

@@ -25,6 +25,12 @@ const THEMES = [
 ];
 
 type Tab = 'all' | 'favorites' | 'recent';
+type BtnSize = 'S' | 'M' | 'L';
+const BTN_SIZES: { id: BtnSize; label: string }[] = [
+  { id: 'S', label: 'S' },
+  { id: 'M', label: 'M' },
+  { id: 'L', label: 'L' },
+];
 
 export default function App() {
   /* ── State ── */
@@ -44,6 +50,7 @@ export default function App() {
   const [volume, setVolume] = useState(1);
   const [favs, setFavs] = useState<Record<string, boolean>>({});
   const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'midnight');
+  const [btnSize, setBtnSize] = useState<BtnSize>(() => (localStorage.getItem('jb-btn-size') as BtnSize) || 'M');
   const [isAdmin, setIsAdmin] = useState(false);
   const [showAdmin, setShowAdmin] = useState(false);
 
@@ -91,6 +98,11 @@ export default function App() {
     localStorage.setItem('jb-theme', theme);
   }, [theme]);
 
+  /* ── Button Size ── */
+  useEffect(() => {
+    localStorage.setItem('jb-btn-size', btnSize);
+  }, [btnSize]);
+
   /* ── SSE ── */
   useEffect(() => {
     const unsub = subscribeEvents((msg) => {
@@ -230,7 +242,7 @@ export default function App() {
 
   /* ── Render ── */
   return (
-    <div className={`app-shell ${chaosMode ? 'party-active' : ''}`}>
+    <div className={`app-shell ${chaosMode ? 'party-active' : ''}`} data-btn-size={btnSize}>
 
       {/* ════════ Header ════════ */}
       <header className="header">
@@ -256,6 +268,18 @@ export default function App() {
             <strong>{total}</strong> Sounds
           </div>
 
+          <div className="size-toggle" title="Button-Größe">
+            {BTN_SIZES.map(s => (
+              <button
+                key={s.id}
+                className={`size-opt ${btnSize === s.id ? 'active' : ''}`}
+                onClick={() => setBtnSize(s.id)}
+              >
+                {s.label}
+              </button>
+            ))}
+          </div>
+
           <select
             className="select-clean"
             value={theme}