diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index 9b4b9a5f..bd2313e8 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full py-6 px-2">
-    <div v-if="localLibraryItem" class="w-full h-full" :class="orderChanged ? 'pb-20' : ''">
+    <div v-if="localLibraryItem" class="w-full h-full">
       <div class="px-2 flex items-center mb-2">
         <p class="text-basefont-semibold">{{ mediaMetadata.title }}</p>
         <div class="flex-grow" />
@@ -18,7 +18,7 @@
       <div v-if="isScanning" class="w-full text-center p-4">
         <p>Scanning...</p>
       </div>
-      <div v-else class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative">
+      <div v-else class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative" :class="{ 'media-order-changed': orderChanged }">
         <div v-if="!isPodcast" class="w-full">
           <p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
 
@@ -395,6 +395,18 @@ export default {
   height: calc(100vh - 200px);
   max-height: calc(100vh - 200px);
 }
+.media-item-container.media-order-changed {
+  height: calc(100vh - 280px);
+  max-height: calc(100vh - 280px);
+}
+.playerOpen .media-item-container {
+  height: calc(100vh - 300px);
+  max-height: calc(100vh - 300px);
+}
+.playerOpen .media-item-container.media-order-changed {
+  height: calc(100vh - 380px);
+  max-height: calc(100vh - 380px);
+}
 .sortable-ghost {
   opacity: 0.5;
 }