feature: Home Page & Footer Mobile Friendly

DeepDrftPublic.Client/Layout/MainLayout.razor

@@ -21,10 +21,12 @@
                 </MudContainer>
             </MudMainContent>
             <DeepDrftFooter />
-            <AudioPlayerBar />
+            <AudioPlayerBar OnMinimized="ToggleAudioPlayerMinimized" />
             
-            @* Spacer to prevent content overlap *@
-            <div class="player-spacer"></div>
+            @* Spacer to prevent content overlap. Height tracks the fixed player
+               dock's live size via the --player-height var the player publishes
+               (see AudioPlayerBar / Interop/layout/spacer.ts). *@
+            <div class="player-spacer @_audioPlayerClass"></div>
         </AudioPlayerProvider>
     </MudLayout>
 </div>
@@ -37,6 +39,7 @@
 </div>
 
 @code {
+    private string _audioPlayerClass = "minimized";
     private const string DarkModeKey = "darkMode";
     private bool _isDarkMode = false;
     private PersistingComponentStateSubscription _persistingSubscription;
@@ -76,6 +79,12 @@
     {
         _persistingSubscription.Dispose();
     }
+
+    private void ToggleAudioPlayerMinimized(bool isMinimized)
+    {
+        _audioPlayerClass = isMinimized ? "minimized" : "expanded";
+    }
+
 }