progress on responsive

src/App.tsx

@@ -541,50 +541,82 @@ function App() {
     <div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
       {showWarning && <AudioContextWarning onDismiss={handleDismissWarning} />}
       {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
-      <header className="bg-black border-b-2 border-white px-6 py-3">
-        <div className="flex items-center justify-between gap-6">
-          <h1
-            onClick={() => setShowHelp(true)}
-            className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
-          >
-            BRUITISTE
-          </h1>
-          <EngineControls
-            values={engineValues}
-            onChange={handleEngineChange}
-            onMapClick={handleParameterMapClick}
-            getMappedLFOs={getMappedLFOs}
-          />
-          <div className="flex gap-4 flex-shrink-0">
+      <header className="bg-black border-b-2 border-white px-2 md:px-6 py-2 md:py-3">
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-6">
+          <div className="flex items-center justify-between w-full md:w-auto gap-2">
+            <h1
+              onClick={() => setShowHelp(true)}
+              className="font-mono text-[10px] md:text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
+            >
+              BRUITISTE
+            </h1>
+            <div className="flex gap-2 md:hidden">
+              <button
+                onClick={handleStop}
+                disabled={!playing}
+                className="px-2 py-1 bg-black text-white border-2 border-white font-mono text-[9px] 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" />
+              </button>
+              <button
+                onClick={handleRandom}
+                className="px-2 py-1 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
+              >
+                <Dices size={12} strokeWidth={2} />
+              </button>
+              <button
+                onClick={handleRandomizeAllParams}
+                className="px-2 py-1 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
+              >
+                <Sparkles size={12} strokeWidth={2} />
+              </button>
+              <button
+                onClick={handleDownloadAll}
+                disabled={downloading}
+                className="px-2 py-1 bg-black text-white border-2 border-white font-mono text-[9px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <Archive size={12} strokeWidth={2} />
+              </button>
+            </div>
+          </div>
+          <div className="w-full md:flex-1">
+            <EngineControls
+              values={engineValues}
+              onChange={handleEngineChange}
+              onMapClick={handleParameterMapClick}
+              getMappedLFOs={getMappedLFOs}
+            />
+          </div>
+          <div className="hidden md:flex gap-2 md:gap-4 flex-shrink-0">
             <button
               onClick={handleStop}
               disabled={!playing}
-              className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-2"
+              className="px-2 md:px-6 py-1 md:py-2 bg-black text-white border-2 border-white font-mono text-[9px] md: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 md:gap-2"
             >
-              <Square size={14} strokeWidth={2} fill="currentColor" />
-              STOP
+              <Square size={12} strokeWidth={2} fill="currentColor" className="md:w-[14px] md:h-[14px]" />
+              <span className="hidden sm:inline">STOP</span>
             </button>
             <button
               onClick={handleRandom}
-              className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-2"
+              className="px-2 md:px-6 py-1 md:py-2 bg-white text-black font-mono text-[9px] md:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 md:gap-2"
             >
-              <Dices size={14} strokeWidth={2} />
-              RANDOM
+              <Dices size={12} strokeWidth={2} className="md:w-[14px] md:h-[14px]" />
+              <span className="hidden sm:inline">RANDOM</span>
             </button>
             <button
               onClick={handleRandomizeAllParams}
-              className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-2"
+              className="px-2 md:px-6 py-1 md:py-2 bg-white text-black font-mono text-[9px] md:text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1 md:gap-2"
             >
-              <Sparkles size={14} strokeWidth={2} />
-              CHAOS
+              <Sparkles size={12} strokeWidth={2} className="md:w-[14px] md:h-[14px]" />
+              <span className="hidden sm:inline">CHAOS</span>
             </button>
             <button
               onClick={handleDownloadAll}
               disabled={downloading}
-              className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-2"
+              className="px-2 md:px-6 py-1 md:py-2 bg-black text-white border-2 border-white font-mono text-[9px] md: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 md:gap-2"
             >
-              <Archive size={14} strokeWidth={2} />
-              {downloading ? 'DOWNLOADING...' : 'PACK'}
+              <Archive size={12} strokeWidth={2} className="md:w-[14px] md:h-[14px]" />
+              <span className="hidden sm:inline">{downloading ? 'DOWNLOADING...' : 'PACK'}</span>
             </button>
           </div>
         </div>
@@ -593,8 +625,8 @@ function App() {
       <LFOPanel onChange={handleLFOChange} onUpdateDepth={handleUpdateMappingDepth} onRemoveMapping={handleRemoveMapping} />
 
       <div className="flex-1 flex flex-col overflow-auto bg-white">
-        <div className="grid grid-cols-4 gap-[1px] bg-white p-[1px]">
-          <div className="col-span-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-[1px] bg-white p-[1px]">
+          <div className="col-span-1 md:col-span-4">
             <FormulaEditor
               formula={customTile.formula}
               isPlaying={playing === PLAYBACK_ID.CUSTOM}
@@ -607,7 +639,7 @@ function App() {
           </div>
         </div>
 
-        <div className="flex-1 grid grid-cols-4 auto-rows-min gap-[1px] bg-white p-[1px]">
+        <div className="flex-1 grid grid-cols-1 md:grid-cols-4 auto-rows-min gap-[1px] bg-white p-[1px]">
           {tiles.map((row, i) =>
             row.map((tile, j) => {
               const id = getTileId(i, j)