CODEX - Composer refinment

frontend/src/melodies/MelodyComposer.jsx

@@ -414,18 +414,29 @@ export default function MelodyComposer() {
           <span className="mx-1 text-sm" style={{ color: "var(--border-primary)" }}>|</span>
           <button type="button" onClick={clearAll} className="px-3 py-1.5 text-sm rounded-md" style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}>Clear</button>
           <div className="ml-auto flex items-center gap-3">
-            <div className="text-xs" style={{ color: "var(--text-muted)" }}>{steps.length} steps, {noteCount} notes</div>
+            <div className="text-xs inline-flex items-center gap-2" style={{ color: "var(--text-muted)" }}>
+              {currentStep >= 0 && (
+                <>
+                  <span>
+                    Playing step {currentStep + 1}/{steps.length}
+                    {activeBellsInCurrentStep.length ? ` (bells: ${activeBellsInCurrentStep.join(", ")})` : " (silence)"}
+                  </span>
+                  <span style={{ color: "var(--border-primary)" }}>|</span>
+                </>
+              )}
+              <span>{steps.length} steps, {noteCount} notes</span>
+            </div>
             <button type="button" onClick={openDeployModal} className="px-3 py-1.5 rounded-md text-sm whitespace-nowrap" style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}>Deploy Archetype</button>
           </div>
         </div>
 
         <div className="mt-4 pt-4 border-t" style={{ borderColor: "var(--border-primary)" }}>
-          <div className="flex flex-wrap items-end gap-4">
+          <div className="flex flex-wrap lg:flex-nowrap items-end gap-4">
             <div className="flex items-center gap-2">
               {!isPlaying ? (
-                <button type="button" onClick={handlePlay} className="px-4 py-2 rounded-md text-sm" style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Play</button>
+                <button type="button" onClick={handlePlay} className="w-24 px-4 py-2 rounded-md text-sm" style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Play</button>
               ) : (
-                <button type="button" onClick={stopPlayback} className="px-4 py-2 rounded-md text-sm" style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}>Stop</button>
+                <button type="button" onClick={stopPlayback} className="w-24 px-4 py-2 rounded-md text-sm" style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}>Stop</button>
               )}
               <button
                 type="button"
@@ -443,19 +454,19 @@ export default function MelodyComposer() {
               <span className="mx-1 text-sm" style={{ color: "var(--border-primary)" }}>|</span>
             </div>
 
-            <div className="flex flex-wrap items-end gap-5">
+            <div className="flex-1 min-w-0 grid grid-cols-1 sm:grid-cols-5 gap-5 items-end">
-              <div className="w-full sm:w-72">
+              <div className="sm:col-span-2 min-w-0">
                 <div className="flex items-center justify-between">
                   <label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>Speed in BPM</label>
                   <span className="text-sm inline-flex items-baseline gap-2">
-                    <span style={{ color: "var(--accent)", fontWeight: 600 }}>{speedBpm} bpm</span>
                     <span style={{ color: "var(--text-muted)", fontSize: "11px" }}>{stepDelayMs} ms</span>
+                    <span style={{ color: "var(--accent)", fontWeight: 600 }}>{speedBpm} bpm</span>
                   </span>
                 </div>
                 <input type="range" min="30" max="1500" step="1" value={speedBpm} onChange={(e) => setStepDelayMs(bpmToMs(Number(e.target.value)))} className="w-full mt-2" />
               </div>
 
-              <div className="w-full sm:w-72">
+              <div className="sm:col-span-2 min-w-0">
                 <div className="flex items-center justify-between">
                   <label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>Note Duration</label>
                   <span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>{noteDurationMs} ms</span>
@@ -463,8 +474,7 @@ export default function MelodyComposer() {
                 <input type="range" min="20" max="500" step="10" value={noteDurationMs} onChange={(e) => setNoteDurationMs(Number(e.target.value))} className="w-full mt-2" />
               </div>
 
-              <span className="mx-1 text-sm self-center" style={{ color: "var(--border-primary)" }}>|</span>
+              <div className="sm:col-span-1 min-w-0">
-              <div className="w-full sm:w-36">
                 <div className="flex items-center justify-between">
                   <label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>Measure</label>
                   <span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>{measureEvery || "Off"}</span>
@@ -473,12 +483,6 @@ export default function MelodyComposer() {
               </div>
             </div>
           </div>
-          {currentStep >= 0 && (
-            <p className="text-xs mt-3" style={{ color: "var(--text-muted)" }}>
-              Playing step {currentStep + 1}/{steps.length}
-              {activeBellsInCurrentStep.length ? ` (bells: ${activeBellsInCurrentStep.join(", ")})` : " (silence)"}
-            </p>
-          )}
         </div>
       </section>