fixing desktop mode top bar

This commit is contained in:
2025-10-06 11:19:01 +02:00
parent 71e01488dc
commit a113294acf

View File

@ -639,7 +639,7 @@ function App() {
</div> </div>
{/* Desktop header */} {/* Desktop header */}
<div className="hidden lg:flex items-center gap-6"> <div className="hidden lg:flex items-center gap-4">
<h1 <h1
onClick={() => setShowHelp(true)} onClick={() => setShowHelp(true)}
className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity" className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
@ -654,36 +654,36 @@ function App() {
getMappedLFOs={getMappedLFOs} getMappedLFOs={getMappedLFOs}
/> />
</div> </div>
<div className="flex gap-4 flex-shrink-0"> <div className="flex gap-3 flex-shrink-0">
<button <button
onClick={handleStop} onClick={handleStop}
disabled={!playing} disabled={!playing}
className="px-2 lg:px-6 py-1 lg:py-2 bg-black text-white border-2 border-white font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 lg:gap-2" className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
> >
<Square size={12} strokeWidth={2} fill="currentColor" className="lg:w-[14px] lg:h-[14px]" /> <Square size={12} strokeWidth={2} fill="currentColor" />
<span className="hidden sm:inline">STOP</span> STOP
</button> </button>
<button <button
onClick={handleRandom} onClick={handleRandom}
className="px-2 lg:px-6 py-1 lg:py-2 bg-white text-black font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 lg:gap-2" className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
> >
<Dices size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" /> <Dices size={12} strokeWidth={2} />
<span className="hidden sm:inline">RANDOM</span> RANDOM
</button> </button>
<button <button
onClick={handleRandomizeAllParams} onClick={handleRandomizeAllParams}
className="px-2 lg:px-6 py-1 lg:py-2 bg-white text-black font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 lg:gap-2" className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
> >
<Sparkles size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" /> <Sparkles size={12} strokeWidth={2} />
<span className="hidden sm:inline">CHAOS</span> CHAOS
</button> </button>
<button <button
onClick={handleDownloadAll} onClick={handleDownloadAll}
disabled={downloading} disabled={downloading}
className="px-2 lg:px-6 py-1 lg:py-2 bg-black text-white border-2 border-white font-mono text-[9px] lg:text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1 lg:gap-2" className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
> >
<Archive size={12} strokeWidth={2} className="lg:w-[14px] lg:h-[14px]" /> <Archive size={12} strokeWidth={2} />
<span className="hidden sm:inline">{downloading ? 'DOWNLOADING...' : 'PACK'}</span> {downloading ? 'DOWNLOADING...' : 'PACK'}
</button> </button>
</div> </div>
</div> </div>