From 836148474949f82df64bd3db1af9a67c485b07e2 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:04:26 +0200
Subject: [PATCH] scope-balk: chips wrappen + persoonkeuze op eigen regel

---
 frontend/src/pages.jsx  | 69 ++++++++++++++++++++++-------------------
 frontend/src/styles.css | 11 ++++---
 2 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index b002420..6a0fbbb 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2478,41 +2478,46 @@ export function RoosterScherm({ mode }) {
 
       {schooljaar && (edit ? tab === "week" : true) && (
         <div className="rooster-balk no-print scope-balk">
-          <span className="scope-label">Toon</span>
           {(groepen.length > 0 || leerpleinen.length > 0) && (
-            <div className="klas-strip">
-              <button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
-              {groepen.map((g) => (
-                <button type="button" key={"g" + g.id} className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"} onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}>{g.naam}</button>
-              ))}
-              {leerpleinen.map((lp) => (
-                <button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button>
-              ))}
+            <div className="scope-rij">
+              <span className="scope-label">Toon</span>
+              <div className="klas-strip">
+                <button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
+                {groepen.map((g) => (
+                  <button type="button" key={"g" + g.id} className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"} onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}>{g.naam}</button>
+                ))}
+                {leerpleinen.map((lp) => (
+                  <button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button>
+                ))}
+              </div>
             </div>
           )}
-          <select
-            className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
-            value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
-            onChange={(e) => {
-              const v = e.target.value;
-              if (!v) { setScopeType("alles"); setScopeId(""); }
-              else if (v[0] === "l") { setScopeType("leerling"); setScopeId(v.slice(1)); }
-              else { setScopeType("personeel"); setScopeId(v.slice(1)); }
-            }}
-          >
-            <option value="">👤 Eén persoon…</option>
-            {leerlingen.length > 0 && (
-              <optgroup label="Leerlingen">
-                {leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
-              </optgroup>
-            )}
-            {medewerkers.length > 0 && (
-              <optgroup label="Personeel">
-                {medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
-              </optgroup>
-            )}
-          </select>
-          {scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
+          <div className="scope-rij">
+            <span className="scope-label">of één persoon</span>
+            <select
+              className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
+              value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
+              onChange={(e) => {
+                const v = e.target.value;
+                if (!v) { setScopeType("alles"); setScopeId(""); }
+                else if (v[0] === "l") { setScopeType("leerling"); setScopeId(v.slice(1)); }
+                else { setScopeType("personeel"); setScopeId(v.slice(1)); }
+              }}
+            >
+              <option value="">👤 kies een leerling of medewerker…</option>
+              {leerlingen.length > 0 && (
+                <optgroup label="Leerlingen">
+                  {leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
+                </optgroup>
+              )}
+              {medewerkers.length > 0 && (
+                <optgroup label="Personeel">
+                  {medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
+                </optgroup>
+              )}
+            </select>
+            {scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
+          </div>
         </div>
       )}
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index bcd4f24..6ef338e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -214,7 +214,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .split-vak-kop { display: flex; align-items: center; gap: 5px; }
 .split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
 .split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
-.klas-strip { display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
+.klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
 .klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
 
 /* --- Blok-bewerker --- */
@@ -271,11 +271,12 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
 .rooster-blok.klikbaar { cursor: pointer; }
 .rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
-.scope-balk { margin-top: -6px; align-items: center; gap: 8px; }
-.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
-.scope-persoon { flex: 0 0 auto; max-width: 200px; }
+.scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 8px; }
+.scope-rij { display: flex; align-items: baseline; gap: 8px; }
+.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; min-width: 88px; padding-top: 4px; }
+.scope-persoon { flex: 0 0 auto; max-width: 280px; }
 .scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
-.scope-aantal { flex: 0 0 auto; white-space: nowrap; }
+.scope-aantal { flex: 0 0 auto; white-space: nowrap; align-self: center; }
 
 /* --- Afdrukken --- */
 .print-knop { margin-left: auto; background: #fff; }