feature: Cleanup Waveform Controls

DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor

@@ -35,18 +35,7 @@
     @if (Visible)
     {
         @* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
-        <div class="wvc-row wvc-row-mode">
+        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
-            <div class="wvc-row-left">
-
-                <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>
             
                 <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">
@@ -54,7 +43,7 @@
                                        Color="Color.Primary"
                                        OnClick="@ToggleWaveform"
                                        aria-label="Waveform ribbon on or off"
-                                       aria-pressed="@ControlState.WaveformEnabled" />
+                                       aria-pressed="@ControlState.WaveformEnabled"/>
                     </div>
                 </MudTooltip>
 
@@ -68,12 +57,12 @@
                                         ValueChanged="@OnCollisionStrengthChanged"
                                         Min="0" Max="1" Step="0.001"
                                         Size="64"
-                                        Color="Color.Primary" />
+                                        Color="Color.Primary"/>
-                            <MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
+                            <MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
                         </div>
                     </MudTooltip>
                 }
-            </div>
+            @* </div> *@
 
             @* 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). *@
@@ -83,18 +72,63 @@
                                 ValueChanged="@OnGradientRotationSpeedChanged"
                                 Min="0" Max="1" Step="0.001"
                                 Size="64"
-                                Color="Color.Primary" />
+                                Color="Color.Primary"/>
-                    <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
+                    <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
                 </div>
             </MudTooltip>
-        </div>
 
-        @* ── Row 2 — LAVA section (only when lava on). ── *@
+            <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" />
+                        </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>
 
+                <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"
@@ -138,37 +172,7 @@
                             <MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
                         </div>
                     </MudTooltip>
-            </div>
+                </MudStack>
-        }
-
-        @* ── Row 3 — 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>
-
-                <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" 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>
             </div>
         }
     }

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -500,8 +500,8 @@ h2, h3, h4, h5, h6,
    inline mount) when the icon also carries mix-visualizer-control-icon. Lamp toggles are MudIconButton
    not MudIcon so they are unaffected — they stay green (interactive, Color.Primary). (defect #3) */
 .waveform-visualizer-control-panel .waveform-visualizer-control-icon {
-    color: var(--deepdrft-white) !important;
     opacity: 0.85;
+    translate: 0 -1rem;
 }
 
 /* ── The modal overlay (Phase 15 §4). MudOverlay is already a full-viewport flex scrim that centers its