From 14e1a8ec48d03fd90fbebf53b4473d569d0c4310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Mon, 6 Oct 2025 16:48:05 +0200
Subject: [PATCH] mobile fix

---
 src/App.tsx                                | 24 +++++++++-------------
 src/components/controls/EngineControls.tsx |  2 +-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ac0c882e..4c490820 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { useStore } from '@nanostores/react'
-import { Square, Archive, Dices, Sparkles, Blend } from 'lucide-react'
+import { Square, Archive, Dices, Sparkles, ArrowLeftRight } from 'lucide-react'
 import { DownloadService } from './services/DownloadService'
 import { generateRandomFormula } from './utils/bytebeatFormulas'
 import { BytebeatTile } from './components/tile/BytebeatTile'
@@ -225,7 +225,7 @@ function App() {
               onClick={() => setShowHelp(true)}
               className="font-mono text-[10px] tracking-[0.3em] text-white cursor-pointer hover:opacity-70 transition-opacity"
             >
-              BRUITISTE
+              BRUIT
             </h1>
             <div className="flex gap-1">
               <div className="flex border-2 border-white">
@@ -237,7 +237,7 @@ function App() {
                       : 'bg-black text-white hover:bg-white/10'
                   }`}
                 >
-                  1-BIT
+                  BYTE
                 </button>
                 <button
                   onClick={handleModeToggle}
@@ -279,7 +279,7 @@ function App() {
                       : 'bg-black text-white hover:bg-white/10'
                   }`}
                 >
-                  MODULATE
+                  MOD
                 </button>
               </div>
             </div>
@@ -310,7 +310,7 @@ function App() {
                 onClick={interpolateParams}
                 className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
               >
-                <Blend size={12} strokeWidth={2} className="mx-auto" />
+                <ArrowLeftRight size={12} strokeWidth={2} className="mx-auto" />
               </button>
               <button
                 onClick={handleDownloadAll}
@@ -387,39 +387,35 @@ function App() {
             <button
               onClick={stop}
               disabled={!playing}
-              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"
+              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"
             >
               <Square size={12} strokeWidth={2} fill="currentColor" />
-              STOP
             </button>
             <button
               onClick={handleRandom}
-              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"
+              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"
             >
               <Dices size={12} strokeWidth={2} />
-              RANDOM
             </button>
             <button
               onClick={randomizeAllParams}
-              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"
+              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"
             >
               <Sparkles size={12} strokeWidth={2} />
-              CHAOS
             </button>
             <button
               onClick={interpolateParams}
               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"
             >
-              <Blend size={12} strokeWidth={2} />
+              <ArrowLeftRight size={12} strokeWidth={2} />
               MORPH
             </button>
             <button
               onClick={handleDownloadAll}
               disabled={downloading}
-              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"
+              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"
             >
               <Archive size={12} strokeWidth={2} />
-              {downloading ? 'DOWNLOADING...' : 'PACK'}
             </button>
           </div>
         </div>
diff --git a/src/components/controls/EngineControls.tsx b/src/components/controls/EngineControls.tsx
index 8aeb343b..06df167e 100644
--- a/src/components/controls/EngineControls.tsx
+++ b/src/components/controls/EngineControls.tsx
@@ -70,7 +70,7 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs, sh
         }
 
         return (
-          <div key={param.id} className="flex flex-col gap-1 min-w-[70px] flex-1 lg:flex-initial lg:min-w-[90px] xl:min-w-[100px]">
+          <div key={param.id} className="flex flex-col gap-1 min-w-[70px] flex-1 lg:flex-initial lg:w-[80px] lg:min-w-0">
             <div className="flex justify-between items-baseline gap-1">
               <label className="font-mono text-[7px] lg:text-[9px] tracking-[0.1em] lg:tracking-[0.15em] text-white truncate">
                 {param.label.toUpperCase()}