From 6f8d1559d9f839711e107a77bc9fa191205df143 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 5 Jun 2026 01:13:32 +0200
Subject: [PATCH] DevTools Mobile: horizontale scroll-Chips statt
 2-Spalten-Grid

---
 frontend/src/tools/devtools.jsx | 74 +++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index b478198..ed76914 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -3106,33 +3106,55 @@ 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: 2-spaltiges Grid */}
-      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>
-        {TOOL_DEFS.map(t=>(
-          <button key={t.id} title={t.desc}
-            onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
-            style={{
-              display:'flex', alignItems:'center', gap:9,
-              padding:'8px 11px', borderRadius:9, fontFamily:'monospace',
-              cursor:t.ready?'pointer':'default', textAlign:'left', border:'none',
-              background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : t.ready ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
-              outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
-            }}>
-            <span style={{fontSize:17,flexShrink:0,lineHeight:1,minWidth:22,textAlign:'center'}}>{getIcon(t.label)}</span>
-            <div style={{minWidth:0,flex:1}}>
-              <div style={{
-                color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.3)',
-                fontSize:12, fontWeight: activeTool===t.id?700:500,
-                overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
-                {getText(t.label)}
+      {/* Tool-Auswahl: Mobile = horizontal scroll, 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>
+      ) : (
+        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>
+          {TOOL_DEFS.map(t=>(
+            <button key={t.id} title={t.desc}
+              onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
+              style={{
+                display:'flex', alignItems:'center', gap:9,
+                padding:'8px 11px', borderRadius:9, fontFamily:'monospace',
+                cursor:t.ready?'pointer':'default', textAlign:'left', border:'none',
+                background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : t.ready ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
+                outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
+              }}>
+              <span style={{fontSize:17,flexShrink:0,lineHeight:1,minWidth:22,textAlign:'center'}}>{getIcon(t.label)}</span>
+              <div style={{minWidth:0,flex:1}}>
+                <div style={{
+                  color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.3)',
+                  fontSize:12, fontWeight: activeTool===t.id?700:500,
+                  overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
+                  {getText(t.label)}
+                </div>
+                <div style={{color:'rgba(255,255,255,0.28)',fontSize:9,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:1}}>
+                  {t.desc}
+                </div>
               </div>
-              <div style={{color:'rgba(255,255,255,0.28)',fontSize:9,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:1}}>
-                {t.desc}
-              </div>
-            </div>
-          </button>
-        ))}
-      </div>
+            </button>
+          ))}
+        </div>
+      )}
 
       <div style={{...S.card}}>
         <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14,flexWrap:'wrap'}}>