feature: Waveform Controls Restructuring

DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor

@@ -34,9 +34,16 @@
 
     @if (Visible)
     {
-        @* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
+        <MudGrid>
-        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+            @*  ── 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>
             
+            <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)"
@@ -58,14 +65,16 @@
                                             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"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Compress"
+                                         Size="Size.Small"
+                                         Color="Color.Primary"
+                                         Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
                             </div>
                         </MudTooltip>
                     }
-            @* </div> *@
 
-            @* Color applies to the whole field regardless of which subsystems are on, so it is pinned
+                    @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
-               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"
@@ -76,6 +85,7 @@
                                 <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">
@@ -86,16 +96,19 @@
                                            aria-pressed="@ControlState.LavaEnabled"/>
                         </div>
                     </MudTooltip>
-
                 </MudStack>
+            </MudItem>
             
-        @* ── Row 2 — WAVE section (only when waveform on). Both controls are RadialKnobs (scroll reverted
+            @*  ── Row 2 — WAVE section (only when waveform on). ──  *@
-           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">
+                <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>
 
+                <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">
@@ -119,15 +132,18 @@
                             </div>
                         </MudTooltip>
                     </MudStack>
-            </div>
+                </MudItem>
             }
             
-        @* ── Row 3 — LAVA section (only when lava on). ── *@
             @if (ControlState.LavaEnabled)
             {
-            <div class="wvc-row wvc-row-section">
+                <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>
 
+                <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">
@@ -173,8 +189,9 @@
                             </div>
                         </MudTooltip>
                     </MudStack>
-            </div>
+                </MudItem>
             }
+        </MudGrid>
     }
 
 </div>

DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css

@@ -38,3 +38,8 @@
     color: var(--mud-palette-primary);
     opacity: 0.78;
 }
+
+.wvc-row {
+    display: flex;
+    width: 100%;
+}

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 {