From e9e639b65422adb1ca9431a4bb3a1cd98dd76a62 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 5 Jun 2026 01:35:23 +0200
Subject: [PATCH] DevTools Mobile: Pfeil-Buttons statt Gradient-Fades, kein
 Chip-Clipping

---
 frontend/src/tools/devtools.jsx | 75 ++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index 3a163c6..45064a3 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -3117,47 +3117,44 @@ export default function DevTools({ toast, mobile }) {
         <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
       </div>
 
-      {/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */}
+      {/* Tool-Auswahl: Mobile = horizontal scroll mit Pfeil-Hints, Desktop = 2-Spalten-Grid */}
       {mobile ? (
-        <div style={{position:'relative', marginBottom:16}}>
-          <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 🚧'); }}
-                style={{
-                  display:'flex', alignItems:'center', gap:6, flexShrink:0,
-                  padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
-                  cursor:t.ready?'pointer':'default', whiteSpace:'nowrap',
-                  background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.05)',
-                  border: activeTool===t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.1)',
-                  color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)',
-                  fontWeight: activeTool===t.id ? 700 : 400,
-                }}>
-                <span style={{fontSize:15}}>{getIcon(t.label)}</span>
-                <span>{getText(t.label)}</span>
-              </button>
-            ))}
-            <div style={{flexShrink:0, width:28}}/>
+        <div style={{marginBottom:16}}>
+          <div style={{display:'flex',alignItems:'center',gap:4}}>
+            {chipScroll.left && (
+              <button onClick={()=>{ chipScrollRef.current?.scrollBy({left:-160,behavior:'smooth'}); }}
+                style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
+                  borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
+                  padding:'6px 8px',fontSize:14,lineHeight:1}}>‹</button>
+            )}
+            <div ref={chipScrollRef} onScroll={onChipScroll}
+              style={{display:'flex',gap:6,overflowX:'auto',flex:1,
+                padding:'3px 2px 6px',
+                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 🚧'); }}
+                  style={{
+                    display:'flex', alignItems:'center', gap:6, flexShrink:0,
+                    padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
+                    cursor:t.ready?'pointer':'default', whiteSpace:'nowrap',
+                    background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.05)',
+                    border: activeTool===t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.1)',
+                    color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)',
+                    fontWeight: activeTool===t.id ? 700 : 400,
+                  }}>
+                  <span style={{fontSize:15}}>{getIcon(t.label)}</span>
+                  <span>{getText(t.label)}</span>
+                </button>
+              ))}
+            </div>
+            {chipScroll.right && (
+              <button onClick={()=>{ chipScrollRef.current?.scrollBy({left:160,behavior:'smooth'}); }}
+                style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
+                  borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
+                  padding:'6px 8px',fontSize:14,lineHeight:1}}>›</button>
+            )}
           </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}}>