From a113294acfe858ad7d19eeb28166103cc36b925e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Mon, 6 Oct 2025 11:19:01 +0200
Subject: [PATCH] fixing desktop mode top bar

---
 src/App.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d2519ad4..745fea67 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -639,7 +639,7 @@ function App() {
         </div>
 
         {/* Desktop header */}
-        <div className="hidden lg:flex items-center gap-6">
+        <div className="hidden lg:flex items-center gap-4">
           <h1
             onClick={() => setShowHelp(true)}
             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}
             />
           </div>
-          <div className="flex gap-4 flex-shrink-0">
+          <div className="flex gap-3 flex-shrink-0">
             <button
               onClick={handleStop}
               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]" />
-              <span className="hidden sm:inline">STOP</span>
+              <Square size={12} strokeWidth={2} fill="currentColor" />
+              STOP
             </button>
             <button
               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]" />
-              <span className="hidden sm:inline">RANDOM</span>
+              <Dices size={12} strokeWidth={2} />
+              RANDOM
             </button>
             <button
               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]" />
-              <span className="hidden sm:inline">CHAOS</span>
+              <Sparkles size={12} strokeWidth={2} />
+              CHAOS
             </button>
             <button
               onClick={handleDownloadAll}
               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]" />
-              <span className="hidden sm:inline">{downloading ? 'DOWNLOADING...' : 'PACK'}</span>
+              <Archive size={12} strokeWidth={2} />
+              {downloading ? 'DOWNLOADING...' : 'PACK'}
             </button>
           </div>
         </div>