From d52945a1bd96b56dabeb4ba56639216657400f58 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Mon, 6 Jul 2026 21:09:53 +0200
Subject: [PATCH] Fix navigation dropdowns and schedule details visibility

---
 frontend/src/pages.jsx  | 4 ++--
 frontend/src/styles.css | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 9d3a502..aefc403 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2087,7 +2087,7 @@ export function RoosterScherm({ mode }) {
   const setWeergave = (v) => { setWeergaveState(v); try { localStorage.setItem("rw_weergave", v); } catch { /* niet beschikbaar */ } };
   const [vakkleurVlak, setVakkleurState] = useState(() => { try { return localStorage.getItem("rw_vakkleur") === "vlak"; } catch { return false; } });
   const setVakkleur = (v) => { setVakkleurState(v); try { localStorage.setItem("rw_vakkleur", v ? "vlak" : "streep"); } catch { /* niet beschikbaar */ } };
-  const [detailsOpen, setDetailsOpenState] = useState(() => { try { return localStorage.getItem("rw_rooster_details") === "1"; } catch { return false; } });
+  const [detailsOpen, setDetailsOpenState] = useState(() => { try { return localStorage.getItem("rw_rooster_details") !== "0"; } catch { return true; } });
   const setDetailsOpen = (v) => { setDetailsOpenState(v); try { localStorage.setItem("rw_rooster_details", v ? "1" : "0"); } catch { /* niet beschikbaar */ } };
   // Printopties
   const [printOpen, setPrintOpen] = useState(false);
@@ -2411,7 +2411,7 @@ export function RoosterScherm({ mode }) {
           {edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
           {edit && <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
         </div>
-        {(edit || detailsOpen) && (b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && (
+        {(b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && (
           <div className="vk-meta">
             {b.locatie_naam && <span className="vk-tag t-loc">📍 {b.locatie_naam}</span>}
             {b.lokaal_naam && <span className="vk-tag t-lok">🚪 {b.lokaal_naam}</span>}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index da43b75..23d0297 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -29,7 +29,7 @@ body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color:
 }
 .topbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
 .topbar-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
-.top-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
+.top-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; overflow: visible; scrollbar-width: thin; }
 .top-tabs-settings { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; border-left: 1px solid var(--line); }
 
 /* Instellingen als cog-menu (popover via hover of klik) */
@@ -676,9 +676,9 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .voorstel-klas h3 { margin: 8px 0 6px; }
 
 /* Groep-dropdowns in de bovenbalk */
-.nav-menu { position: relative; }
+.nav-menu { position: relative; flex: 0 0 auto; }
 .nav-trigger .caret { font-size: 10px; opacity: .65; margin-left: 1px; }
-.nav-dropdown { display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); min-width: 210px; padding: 6px; z-index: 60; }
+.nav-dropdown { display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.16); min-width: 210px; padding: 6px; z-index: 80; }
 .nav-menu:hover .nav-dropdown, .nav-menu.open .nav-dropdown { display: block; }
 
 /* In-pagina tabbalk: icoon altijd, label inklapbaar op smalle schermen */