keep the mini player off the nav bar and restore full saturation

app/src/main/kotlin/com/subtracks/ui/playback/MiniPlayer.kt

@@ -1,15 +1,19 @@
 package com.subtracks.ui.playback
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Pause
@@ -34,7 +38,6 @@ import com.subtracks.playback.PlaybackState
 import com.subtracks.ui.components.CoverArt
 import com.subtracks.ui.theme.ArtworkColors
 import com.subtracks.ui.theme.ArtworkTheme
-import com.subtracks.ui.theme.toHsl
 
 @Composable
 fun MiniPlayer(
@@ -48,15 +51,14 @@ fun MiniPlayer(
 ) {
     val item = state.item ?: return
     ArtworkTheme(artwork) {
+        Column(modifier.fillMaxWidth()) {
             Surface(
                 color =
-                artwork?.let {
+                    artwork?.let { lerp(it.scheme.surfaceContainerHigh, it.gradientHigh, 0.5f) }
-                    val (hue, saturation, lightness) = lerp(it.scheme.surfaceContainerHigh, it.gradientHigh, 0.5f).toHsl()
+                        ?: MaterialTheme.colorScheme.surfaceContainerHigh,
-                    Color.hsl(hue, saturation * 0.8f, lightness)
-                } ?: MaterialTheme.colorScheme.surfaceContainerHigh,
                 contentColor = MaterialTheme.colorScheme.onSurface,
                 modifier =
-                modifier.fillMaxWidth().clickable(
+                    Modifier.fillMaxWidth().clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,
                         onClick = onExpand,
@@ -66,7 +68,6 @@ fun MiniPlayer(
                     modifier =
                         Modifier
                             .fillMaxWidth()
-                        .navigationBarsPadding()
                             .padding(start = 12.dp, end = 4.dp, top = 12.dp, bottom = 12.dp),
                     verticalAlignment = Alignment.CenterVertically,
                     horizontalArrangement = Arrangement.spacedBy(12.dp),
@@ -120,5 +121,9 @@ fun MiniPlayer(
                     }
                 }
             }
+            Spacer(
+                Modifier.fillMaxWidth().windowInsetsBottomHeight(WindowInsets.navigationBars).background(Color.Black),
+            )
+        }
     }
 }