From a262f714e5dca99b7d2a24972fb86823da8ad11a Mon Sep 17 00:00:00 2001
From: b1rdmania <102524336+b1rdmania@users.noreply.github.com>
Date: Thu, 18 Dec 2025 19:20:52 +0000
Subject: [PATCH] Improve Motif player layout and alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reorganize controls into a cleaner horizontal flow
- Place Generate, Stop, and Volume controls in one row
- Better visual alignment and spacing
- Progress bar section sits cleanly below controls
- Responsive flexbox layout that wraps on smaller screens
- Remove awkward two-column grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 68 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 14bedab..562e68b 100644
--- a/index.html
+++ b/index.html
@@ -232,28 +232,41 @@
             box-shadow: 0 30px 120px rgba(0, 0, 0, 0.65);
         }
         .motif-grid {
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) 240px;
-            gap: 18px;
-            align-items: start;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
         }
-        @media (max-width: 920px) {
-            .motif-grid {
-                grid-template-columns: 1fr;
-            }
+        .motif-header {
+            margin-bottom: 6px;
         }
-        .motif-actions {
-            display: grid;
-            gap: 10px;
+        .motif-controls {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            flex-wrap: wrap;
         }
-        .motif-actions button.primary {
+        .motif-controls button {
+            flex-shrink: 0;
+        }
+        .motif-controls button.primary {
+            flex: 1;
+            min-width: 180px;
             padding: 12px 16px;
             font-weight: 700;
         }
-        .motif-actions button.primary:hover {
+        .motif-controls button.primary:hover {
             box-shadow: 0 16px 60px rgba(255, 170, 68, 0.15);
             border-color: rgba(255, 170, 68, 0.55);
         }
+        .motif-controls .volume-control {
+            flex: 1;
+            min-width: 200px;
+            margin-top: 0;
+        }
+        .motif-controls .volume-control label {
+            font-size: 0.85em;
+            min-width: 55px;
+        }
         .motif-kicker {
             font-size: 0.85em;
             color: #b6b6b6;
@@ -285,8 +298,8 @@
         }
 
         .motif-progress-container {
-            margin-top: 20px;
-            padding-top: 20px;
+            margin-top: 8px;
+            padding-top: 16px;
             border-top: 1px solid rgba(255, 170, 68, 0.15);
         }
         .progress-time {
@@ -458,28 +471,29 @@
 
                 <div class="motif-stage">
                     <div class="motif-grid">
-                        <div>
+                        <div class="motif-header">
                             <h4 style="margin:0; color:#ffaa44; text-shadow: 0 0 18px rgba(255,170,68,0.15);">Procedural Synthesis</h4>
                             <p class="motif-kicker">Web Audio oscillators with dynamic filtering and envelopes.</p>
                         </div>
-                        <div class="motif-actions">
+
+                        <div class="motif-controls">
                             <button id="motifBtn" class="primary" disabled>Generate & Play</button>
                             <button id="motifStopBtn" disabled>Stop</button>
                             <div class="volume-control">
-                                <label for="motifVolume">Volume:</label>
+                                <label for="motifVolume">Volume</label>
                                 <input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.3" />
                             </div>
                         </div>
-                    </div>
 
-                    <div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
-                        <div class="progress-time">
-                            <span id="motifCurrentTime">0:00</span>
-                            <span id="motifDuration">0:00</span>
-                        </div>
-                        <div class="progress-bar-wrapper">
-                            <input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
-                            <div class="progress-fill" id="motifProgressFill"></div>
+                        <div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
+                            <div class="progress-time">
+                                <span id="motifCurrentTime">0:00</span>
+                                <span id="motifDuration">0:00</span>
+                            </div>
+                            <div class="progress-bar-wrapper">
+                                <input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
+                                <div class="progress-fill" id="motifProgressFill"></div>
+                            </div>
                         </div>
                     </div>
                 </div>