From ee47a8bcc7c10a2cfd79f158e05bc9fa5631bfd9 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 5 Jun 2026 01:19:16 +0200
Subject: [PATCH] DevTools Mobile: border statt outline (kein clip), Fade-Hint
 rechts mit Pfeil

---
 frontend/src/tools/devtools.jsx | 53 +++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index ed76914..fa03a91 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -3106,26 +3106,41 @@ 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, Desktop = 2-Spalten-Grid */}
+      {/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */}
       {mobile ? (
-        <div style={{display:'flex',gap:6,overflowX:'auto',marginBottom:16,
-          paddingBottom:4,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', border:'none',
-                background: activeTool===t.id ? 'rgba(78,205,196,0.2)' : 'rgba(255,255,255,0.06)',
-                outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
-                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={{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'}}>
+            {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>
+            ))}
+            {/* Abstandshalter rechts damit letzter Chip nicht unter Fade liegt */}
+            <div style={{flexShrink:0, width:32}}/>
+          </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>
         </div>
       ) : (
         <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>