From d3f89c494a0adbeb3835c872a9b2d70858895c21 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 20 Jun 2026 18:56:53 -0400
Subject: [PATCH] fix: Waveform Visualizer Controls layout

---
 .../Controls/WaveformVisualizerControls.razor      | 14 +++++++-------
 DeepDrftPublic/wwwroot/styles/deepdrft-styles.css  |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
index 2f2b48d..e8a6285 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
@@ -36,13 +36,13 @@
     {
         <MudGrid>
             @*  ── Row 1 — MODE (always visible). ──  *@
-            <MudItem xs="3" Class="d-flex align-center">
+            <MudItem xs="2" 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">
+            <MudItem xs="10">
                 <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">
@@ -102,13 +102,13 @@
             @*  ── Row 2 — WAVE section (only when waveform on). ──  *@
             @if (ControlState.WaveformEnabled)
             {
-                <MudItem xs="3" Class="d-flex align-center">
+                <MudItem xs="2" 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">
+                <MudItem xs="10">
                     <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">
@@ -137,13 +137,13 @@
             
             @if (ControlState.LavaEnabled)
             {
-                <MudItem xs="3" Class="d-flex align-center">
+                <MudItem xs="2" 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">
+                <MudItem xs="10" 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">
@@ -167,7 +167,7 @@
                             </div>
                         </MudTooltip>
 
-                        <MudTooltip Text="How much goo is in the lamp.">
+                        <MudTooltip Text="How much wax is in the lamp.">
                             <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
                                 <RadialKnob Value="@ControlState.FluidAmount"
                                             ValueChanged="@OnFluidAmountChanged"
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index 5580ebf..94c42de 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -440,7 +440,7 @@ h2, h3, h4, h5, h6,
     flex-direction: column;
     gap: 0.75rem;
     min-height: 0;
-    max-width: 420px;
+    max-width: 480px;
     /* Pin the MudBlazor palette vars the portaled RadialKnob + slider consume. */
     --mud-palette-primary: var(--deepdrft-green-accent);       /* knob arc/pointer + slider track/thumb (interactive) */
     --mud-palette-surface: var(--deepdrft-navy);               /* knob center fill — darkest navy reads against the panel */