AutoImage replaced LazyImage && general improvements to components with style props

src/routes/(app)/+layout.svelte

@@ -9,25 +9,32 @@
 
     $: currentlyPlaying = $queue.current
     $: shuffled = $queue.isShuffled
+
+    let playerWidth: number
 </script>
 
-<main id="grid-wrapper" class="h-full">
+<main id="grid-wrapper" class="relative h-full">
     <Navbar on:opensidebar={sidebar.open} />
     <Sidebar bind:this={sidebar} />
     <section id="content-wrapper" class="overflow-y-scroll no-scrollbar">
-        <slot />
+        <div class="my-8">
+            <slot />
+        </div>
+        {#if currentlyPlaying}
+            <div bind:clientWidth={playerWidth} class="sticky {playerWidth > 800 ? 'bottom-0' : 'bottom-3 mx-3'} transition-all">
+                <MediaPlayer
+                    mediaItem={currentlyPlaying}
+                    {shuffled}
+                    mediaSession={'mediaSession' in navigator ? navigator.mediaSession : null}
+                    --border-radius={playerWidth > 800 ? '0' : '0.5rem'}
+                    on:stop={() => $queue.clear()}
+                    on:next={() => $queue.next()}
+                    on:previous={() => $queue.previous()}
+                    on:toggleShuffle={() => $queue.toggleShuffle()}
+                />
+            </div>
+        {/if}
     </section>
-    {#if currentlyPlaying}
-        <MediaPlayer
-            mediaItem={currentlyPlaying}
-            {shuffled}
-            mediaSession={'mediaSession' in navigator ? navigator.mediaSession : null}
-            on:stop={() => $queue.clear()}
-            on:next={() => $queue.next()}
-            on:previous={() => $queue.previous()}
-            on:toggleShuffle={() => $queue.toggleShuffle()}
-        />
-    {/if}
 </main>
 
 <style>
@@ -35,4 +42,8 @@
         display: grid;
         grid-template-rows: min-content auto;
     }
+    #content-wrapper {
+        display: grid;
+        grid-template-rows: auto min-content;
+    }
 </style>