Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

DevTools Mobile: border statt outline (kein clip), Fade-Hint rechts mit Pfeil

Browse Source
This commit is contained in:
Dicken
2026-06-05 01:19:16 +02:00
parent 6f8d1559d9
commit ee47a8bcc7
1 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/tools/devtools.jsx
View File

@@ -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}}>