layout and remote fix

src/routes/library/+layout.svelte

@@ -5,10 +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 { bottomUiHeight } from "$lib/stores/appState";
-  import { reservedBottomPadding } from "$lib/utils/layoutShell";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
+  import BottomUi from "$lib/components/BottomUi.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
 
   // Scroll guard prevents accidental taps on library cards during/after scrolling (Android)
@@ -190,18 +189,20 @@
       </div>
     </header>
 
-    <!-- Main content. The fixed bottom UI (mini player + nav) is owned entirely
-         by the root layout on every platform, and its live-measured height is
-         published to `bottomUiHeight`. We reserve exactly that here (plus a
-         little breathing room) so the last row never hides behind the nav. -->
+    <!-- Main content. The BottomUi below is an in-flow flex sibling, so this
+         scroller is physically bounded above it and its last row can never
+         render behind the nav — no measurement, no reserved padding. -->
     <main
       class="flex-1 overflow-y-auto p-4 min-h-0"
-      style="padding-bottom: {reservedBottomPadding($bottomUiHeight, 1)}; overscroll-behavior: contain"
+      style="overscroll-behavior: contain"
       onscroll={scrollGuard.onScroll}
     >
       {@render children()}
     </main>
 
+    <!-- Bottom UI (mini player + nav), in-flow below the scroller. -->
+    <BottomUi />
+
     <!-- Sleep Timer Modal -->
     <SleepTimerModal
       isOpen={showSleepTimerModal}