From 19837567cdb607d322b48d79af459e42b08a44e3 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Sun, 28 Jun 2026 13:45:26 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20HelpModal=20schlie=C3=9Fbar,=20mobile=20?=
 =?UTF-8?q?Nav=20scrollbar=20+=20einklappbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx                    | 33 ++++++++++++++++---------
 frontend/src/tools/gebietseroberung.jsx | 12 ++++++---
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f408936..9a784e7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -284,6 +284,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
 function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [appsOpen, setAppsOpen] = useState(false);
+  const [mobileCollapsedGroups, setMobileCollapsedGroups] = useState({});
   const NAV_H = 56;
 
   const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => {
@@ -339,19 +340,27 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
 
   return (
     <>
-      {/* Apps Sheet mit Gruppenüberschriften */}
+      {/* Apps Sheet mit Gruppenüberschriften + einklappbar + scrollbar */}
       <Sheet open={appsOpen} onClose={()=>setAppsOpen(false)}>
-        <div style={{ paddingBottom:4 }}>
-          {getGroupedTools().map(([group, tools]) => (
-            <div key={group}>
-              <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
-                letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
-              {tools.map(t => (
-                <MI key={t.id} Icon={t.Icon} label={t.label}
-                  onClick={() => { setActive(t.id); setAppsOpen(false); }} />
-              ))}
-            </div>
-          ))}
+        <div style={{ overflowY:'auto', maxHeight:'60vh', paddingBottom:8 }}>
+          {getGroupedTools().map(([group, tools]) => {
+            const isGrpCollapsed = !!mobileCollapsedGroups[group];
+            return (
+              <div key={group}>
+                <button onClick={() => setMobileCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }))}
+                  style={{ width:'100%', display:'flex', alignItems:'center', gap:6,
+                    background:'none', border:'none', cursor:'pointer', padding:'12px 20px 5px' }}>
+                  <span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
+                    letterSpacing:2, flex:1, textAlign:'left' }}>{group.toUpperCase()}</span>
+                  <ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGrpCollapsed ? 'right' : 'down'} />
+                </button>
+                {!isGrpCollapsed && tools.map(t => (
+                  <MI key={t.id} Icon={t.Icon} label={t.label}
+                    onClick={() => { setActive(t.id); setAppsOpen(false); }} />
+                ))}
+              </div>
+            );
+          })}
         </div>
       </Sheet>
 
diff --git a/frontend/src/tools/gebietseroberung.jsx b/frontend/src/tools/gebietseroberung.jsx
index 51ae25a..2c74246 100644
--- a/frontend/src/tools/gebietseroberung.jsx
+++ b/frontend/src/tools/gebietseroberung.jsx
@@ -23,12 +23,17 @@ function getMyRole() {
 // ── Spielerklärung ────────────────────────────────────────────────────────────
 function HelpModal({ onClose }) {
   return (
-    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.85)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:16, overflowY:'auto' }}>
-      <div style={{ ...S.card, maxWidth:460, width:'100%' }}>
-        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
+    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.85)', zIndex:1000, display:'flex', flexDirection:'column' }}
+      onClick={onClose}>
+      <div style={{ ...S.card, maxWidth:460, width:'100%', margin:'16px auto', display:'flex', flexDirection:'column',
+        maxHeight:'calc(100dvh - 32px)', overflow:'hidden' }}
+        onClick={e => e.stopPropagation()}>
+        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
+          paddingBottom:14, marginBottom:14, borderBottom:'1px solid rgba(255,255,255,0.08)', flexShrink:0 }}>
           <span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700, letterSpacing:1 }}>⬡ SPIELREGELN</span>
           <button onClick={onClose} style={S.btn('#ff6b9d', true)}>✕ Schließen</button>
         </div>
+        <div style={{ overflowY:'auto', paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' }}>
         <div style={{ color:'rgba(255,255,255,0.75)', fontSize:13, lineHeight:1.9, fontFamily:'monospace' }}>
           <p style={{ marginTop:0 }}>
             <strong style={{ color:MY_COLOR }}>Ziel:</strong> Sammle mehr <strong>Punkte</strong> als dein Gegner — durch clevere Expansion und das Meiden von Fallen.
@@ -62,6 +67,7 @@ function HelpModal({ onClose }) {
             📱 <em>Auf dem Handy: Pinch zum Zoomen, Feld antippen und bestätigen.</em>
           </div>
         </div>
+        </div>
       </div>
     </div>
   );