From eea77f30da35386ef189b43e26efed6aa42dd425 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 5 Jun 2026 01:22:31 +0200
Subject: [PATCH] DevTools Mobile: Scroll-Fades abgerundet, links-Fade
 dynamisch bei Scroll-Position

---
 frontend/src/tools/devtools.jsx | 47 ++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index fa03a91..3a163c6 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -3092,6 +3092,17 @@ const TOOL_DEFS = [
 export default function DevTools({ toast, mobile }) {
   const [activeTool, setActiveTool] = useState('cron');
   const [activeTab,  setActiveTab]  = useState('explain');
+  const chipScrollRef = useRef(null);
+  const [chipScroll, setChipScroll] = useState({ left: false, right: true });
+
+  const onChipScroll = () => {
+    const el = chipScrollRef.current;
+    if (!el) return;
+    setChipScroll({
+      left:  el.scrollLeft > 4,
+      right: el.scrollLeft < el.scrollWidth - el.clientWidth - 4,
+    });
+  };
   const active = TOOL_DEFS.find(t=>t.id===activeTool);
   const ActiveComp = active?.tabs ? active.components[activeTab] : active?.component;
 
@@ -3109,9 +3120,10 @@ export default function DevTools({ toast, mobile }) {
       {/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */}
       {mobile ? (
         <div style={{position:'relative', marginBottom:16}}>
-          <div style={{display:'flex',gap:6,overflowX:'auto',
-            padding:'3px 3px 6px 3px', /* Platz für border, kein clip */
-            scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
+          <div ref={chipScrollRef} onScroll={onChipScroll}
+            style={{display:'flex',gap:6,overflowX:'auto',
+              padding:'3px 3px 6px 3px',
+              scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
             {TOOL_DEFS.map(t=>(
               <button key={t.id}
                 onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
@@ -3128,19 +3140,24 @@ export default function DevTools({ toast, mobile }) {
                 <span>{getText(t.label)}</span>
               </button>
             ))}
-            {/* Abstandshalter rechts damit letzter Chip nicht unter Fade liegt */}
-            <div style={{flexShrink:0, width:32}}/>
+            <div style={{flexShrink:0, width:28}}/>
           </div>
-          {/* Fade-Overlay rechts → signalisiert weiteren Inhalt ohne Chips abzuschneiden */}
-          <div style={{
-            position:'absolute', right:0, top:0, bottom:6, width:48, pointerEvents:'none',
-            background:'linear-gradient(to right, transparent, #0d0d0f 80%)',
-          }}/>
-          {/* Scroll-Pfeil */}
-          <div style={{
-            position:'absolute', right:6, top:'50%', transform:'translateY(-60%)',
-            color:'rgba(255,255,255,0.35)', fontSize:14, pointerEvents:'none',
-          }}>›</div>
+          {/* Links-Fade — erscheint wenn nach rechts gescrollt */}
+          {chipScroll.left && (
+            <div style={{
+              position:'absolute', left:3, top:3, bottom:6, width:52, pointerEvents:'none',
+              borderRadius:20,
+              background:'linear-gradient(to right, #0d0d0f 30%, transparent)',
+            }}/>
+          )}
+          {/* Rechts-Fade — verschwindet wenn am Ende */}
+          {chipScroll.right && (
+            <div style={{
+              position:'absolute', right:3, top:3, bottom:6, width:52, pointerEvents:'none',
+              borderRadius:20,
+              background:'linear-gradient(to left, #0d0d0f 30%, transparent)',
+            }}/>
+          )}
         </div>
       ) : (
         <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>