From 20b36697d485192e84dbd2c774a9c654922f4e62 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Mon, 23 Mar 2026 08:59:12 +0100
Subject: [PATCH] fix(mukke): position MiniPlayer above PillNav to prevent
 overlap

MiniPlayer was fixed at bottom-0 behind PillNav (z-1000). Now offset
by 80px + safe-area so it sits directly above the navigation bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/components/MiniPlayer.svelte      | 10 +++++++++-
 apps/mukke/apps/web/src/routes/(app)/+layout.svelte    |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
index cf981a0eb..012bae65a 100644
--- a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
+++ b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
@@ -13,7 +13,9 @@
 </script>
 
 {#if playerStore.currentSong}
-	<div class="fixed bottom-0 left-0 right-0 z-30 bg-surface border-t border-border">
+	<div
+		class="mini-player fixed left-0 right-0 z-30 bg-surface border-t border-border rounded-t-xl shadow-lg"
+	>
 		<!-- Error toast -->
 		{#if playerStore.error}
 			<div
@@ -113,3 +115,9 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.mini-player {
+		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+	}
+</style>
diff --git a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
index 6349d65be..5d8fc7cfa 100644
--- a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
@@ -181,12 +181,12 @@
 	.main-content {
 		flex: 1;
 		transition: all 300ms ease;
-		padding-bottom: calc(130px + env(safe-area-inset-bottom));
+		padding-bottom: calc(180px + env(safe-area-inset-bottom));
 	}
 
 	@media (max-width: 768px) {
 		.main-content {
-			padding-bottom: calc(140px + env(safe-area-inset-bottom));
+			padding-bottom: calc(190px + env(safe-area-inset-bottom));
 		}
 	}