From f5edcba7b2a5b12dc9e7232700eafd4f3bd23a40 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 20 Jun 2026 03:12:41 -0400
Subject: [PATCH] feature: Waveform Controls Restructuring

---
 .../Controls/WaveformVisualizerControls.razor | 275 ++++++++++--------
 .../WaveformVisualizerControls.razor.css      |   5 +
 .../Pages/ArchiveView.razor.css               |   2 +-
 3 files changed, 152 insertions(+), 130 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
index 46e782d..2f2b48d 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
@@ -34,147 +34,164 @@
 
     @if (Visible)
     {
-        @* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
-        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+        <MudGrid>
+            @*  ── Row 1 — MODE (always visible). ──  *@
+            <MudItem xs="3" Class="d-flex align-center">
+                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                    <span class="wvc-section-label">MODE:</span>
+                </MudStack>
+            </MudItem>
             
-                <MudTooltip Text="Show the sound, or hide the ribbon.">
-                    <div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
-                        <MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
-                                       Color="Color.Primary"
-                                       OnClick="@ToggleWaveform"
-                                       aria-label="Waveform ribbon on or off"
-                                       aria-pressed="@ControlState.WaveformEnabled"/>
-                    </div>
-                </MudTooltip>
+            <MudItem xs="9">
+                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                    <MudTooltip Text="Show the sound, or hide the ribbon.">
+                        <div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
+                            <MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
+                                           Color="Color.Primary"
+                                           OnClick="@ToggleWaveform"
+                                           aria-label="Waveform ribbon on or off"
+                                           aria-pressed="@ControlState.WaveformEnabled"/>
+                        </div>
+                    </MudTooltip>
 
-                @* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
+                    @* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
                    present, so visible only when BOTH are on (§3 truth table). *@
-                @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
-                {
-                    <MudTooltip Text="How hard the blobs body-check the beat.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
-                            <RadialKnob Value="@ControlState.CollisionStrength"
-                                        ValueChanged="@OnCollisionStrengthChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary"/>
-                            <MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
-                        </div>
-                    </MudTooltip>
-                }
-            @* </div> *@
+                    @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
+                    {
+                        <MudTooltip Text="How hard the blobs body-check the beat.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
+                                <RadialKnob Value="@ControlState.CollisionStrength"
+                                            ValueChanged="@OnCollisionStrengthChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Compress"
+                                         Size="Size.Small"
+                                         Color="Color.Primary"
+                                         Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    }
 
-            @* Color applies to the whole field regardless of which subsystems are on, so it is pinned
-               far-right of row 1 and never reflows when collisions hides (§3). *@
-            <MudTooltip Text="How fast the lamp drifts through its colors.">
-                <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
-                    <RadialKnob Value="@ControlState.GradientRotationSpeed"
-                                ValueChanged="@OnGradientRotationSpeedChanged"
-                                Min="0" Max="1" Step="0.001"
-                                Size="64"
-                                Color="Color.Primary"/>
-                    <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
-                </div>
-            </MudTooltip>
+                    @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
+                    {
+                        <MudTooltip Text="How fast the lamp drifts through its colors.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
+                                <RadialKnob Value="@ControlState.GradientRotationSpeed"
+                                            ValueChanged="@OnGradientRotationSpeedChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    }
 
-            <MudTooltip Text="Light the lamp — or let it go cold.">
-                <div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
-                    <MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
-                                   Color="Color.Primary"
-                                   OnClick="@ToggleLava"
-                                   aria-label="Lava field on or off"
-                                   aria-pressed="@ControlState.LavaEnabled"/>
-                </div>
-            </MudTooltip>
-
-        </MudStack>
-
-        @* ── Row 2 — WAVE section (only when waveform on). Both controls are RadialKnobs (scroll reverted
-           from MudSlider per Phase 15 polish); width pinned far-right via wvc-row-wave space-between. ── *@
-        @if (ControlState.WaveformEnabled)
-        {
-            <div class="wvc-row wvc-row-section wvc-row-wave">
-                <span class="wvc-section-label">WAVE:</span>
-
-                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
-                    <MudTooltip Text="How fast the sound rolls by.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
-                            <RadialKnob Value="@ControlState.ScrollSpeed"
-                                        ValueChanged="@OnScrollSpeedChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
-
-                    <MudTooltip Text="How wide the ribbon spreads across the lamp.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
-                            <RadialKnob Value="@ControlState.WaveformWidth"
-                                        ValueChanged="@OnWaveformWidthChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
+                    <MudTooltip Text="Light the lamp — or let it go cold.">
+                        <div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
+                            <MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
+                                           Color="Color.Primary"
+                                           OnClick="@ToggleLava"
+                                           aria-label="Lava field on or off"
+                                           aria-pressed="@ControlState.LavaEnabled"/>
                         </div>
                     </MudTooltip>
                 </MudStack>
-            </div>
-        }
-        
-        @* ── Row 3 — LAVA section (only when lava on). ── *@
-        @if (ControlState.LavaEnabled)
-        {
-            <div class="wvc-row wvc-row-section">
-                <span class="wvc-section-label">LAVA:</span>
+            </MudItem>
+            
+            @*  ── Row 2 — WAVE section (only when waveform on). ──  *@
+            @if (ControlState.WaveformEnabled)
+            {
+                <MudItem xs="3" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                        <span class="wvc-section-label">WAVE:</span>
+                    </MudStack>
+                </MudItem>
 
-                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
-                    <MudTooltip Text="How heavy the wax feels — float, or sink.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
-                            <RadialKnob Value="@ControlState.LavaGravity"
-                                        ValueChanged="@OnLavaGravityChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+                <MudItem xs="9">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                        <MudTooltip Text="How fast the sound rolls by.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
+                                <RadialKnob Value="@ControlState.ScrollSpeed"
+                                            ValueChanged="@OnScrollSpeedChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
 
-                    <MudTooltip Text="Crank the burner. More heat, more rolling boil.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
-                            <RadialKnob Value="@ControlState.LavaHeat"
-                                        ValueChanged="@OnLavaHeatChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+                        <MudTooltip Text="How wide the ribbon spreads across the lamp.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
+                                <RadialKnob Value="@ControlState.WaveformWidth"
+                                            ValueChanged="@OnWaveformWidthChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    </MudStack>
+                </MudItem>
+            }
+            
+            @if (ControlState.LavaEnabled)
+            {
+                <MudItem xs="3" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                        <span class="wvc-section-label">LAVA:</span>
+                    </MudStack>
+                </MudItem>
 
-                    <MudTooltip Text="How much goo is in the lamp.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
-                            <RadialKnob Value="@ControlState.FluidAmount"
-                                        ValueChanged="@OnFluidAmountChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+                <MudItem xs="9" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                        <MudTooltip Text="How heavy the wax feels — float, or sink.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
+                                <RadialKnob Value="@ControlState.LavaGravity"
+                                            ValueChanged="@OnLavaGravityChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
 
-                    <MudTooltip Text="Runny and gooey, or tight little globes.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
-                            <RadialKnob Value="@ControlState.FluidViscosity"
-                                        ValueChanged="@OnFluidViscosityChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
-                </MudStack>
-            </div>
-        }
+                        <MudTooltip Text="Crank the burner. More heat, more rolling boil.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
+                                <RadialKnob Value="@ControlState.LavaHeat"
+                                            ValueChanged="@OnLavaHeatChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+
+                        <MudTooltip Text="How much goo is in the lamp.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
+                                <RadialKnob Value="@ControlState.FluidAmount"
+                                            ValueChanged="@OnFluidAmountChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+
+                        <MudTooltip Text="Runny and gooey, or tight little globes.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
+                                <RadialKnob Value="@ControlState.FluidViscosity"
+                                            ValueChanged="@OnFluidViscosityChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    </MudStack>
+                </MudItem>
+            }
+        </MudGrid>
     }
 
 </div>
diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css
index 9f10fb2..4a0aeb2 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css
@@ -38,3 +38,8 @@
     color: var(--mud-palette-primary);
     opacity: 0.78;
 }
+
+.wvc-row {
+    display: flex;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/DeepDrftPublic.Client/Pages/ArchiveView.razor.css b/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
index bae908e..3346aa5 100644
--- a/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
+++ b/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
@@ -9,7 +9,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 24px;
-    padding: 36px 0 20px 0;
+    padding: 12px 0 20px 0;
 }
 
 .archive-controls-search {