layout improvements

src/routes/library/+layout.svelte

@@ -5,9 +5,9 @@
   import { commands } from "$lib/api/bindings";
   import { auth, isAuthenticated, isLoading as isAuthLoading, currentUser } from "$lib/stores/auth";
   import { library } from "$lib/stores/library";
-  import { currentMedia, isPlaying, playbackPosition, playbackDuration, shouldShowAudioMiniPlayer } from "$lib/stores/player";
+  import { currentMedia, isPlaying, playbackPosition, playbackDuration } from "$lib/stores/player";
   import { isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
-  import { isAndroid } from "$lib/stores/appState";
+  import { isAndroid, bottomUiHeight } from "$lib/stores/appState";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
@@ -204,17 +204,23 @@
       </div>
     </header>
 
-    <!-- Main content (with padding for bottom nav bar and mini player) -->
+    <!-- Main content. The mini player is an in-flow flex sibling below this
+         scroller (not a fixed overlay), so the list can never render behind it.
+         Android keeps the global fixed bottom UI (nav + mini player), so there we
+         reserve its real measured height (`bottomUiHeight`, observed live in the
+         root layout) plus a little breathing room. Non-Android reserves none —
+         the in-flow bar below owns that space. -->
     <main
-      class="flex-1 overflow-y-auto p-4"
-      style="padding-bottom: {$shouldShowAudioMiniPlayer ? ($isAndroid ? '11rem' : '7rem') : '5rem'}; overscroll-behavior: contain"
+      class="flex-1 overflow-y-auto p-4 min-h-0"
+      style="padding-bottom: {$isAndroid ? `calc(${$bottomUiHeight}px + 1rem)` : '1rem'}; overscroll-behavior: contain"
       onscroll={scrollGuard.onScroll}
     >
       {@render children()}
     </main>
 
     <!-- Mini Player (only show on non-Android platforms - Android uses global mini player) -->
-    <!-- Hide on player page since full player is already there -->
+    <!-- Hide on player page since full player is already there. Rendered in
+         normal flex flow so it sits above the list rather than overlapping it. -->
     {#if !$isAndroid && !$page.url.pathname.startsWith('/player/')}
       <MiniPlayer
         media={$currentMedia}
@@ -225,6 +231,7 @@
         {repeat}
         {hasNext}
         {hasPrevious}
+        className="flex-shrink-0"
         onExpand={() => showFullPlayer = true}
         onSleepTimerClick={() => showSleepTimerModal = true}
       />