From d2b668ba12d3a700bd2072dd4739512672516a75 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Sun, 28 Sep 2025 14:11:22 +0930
Subject: [PATCH] Inset player on large screens

---
 src/components/Player.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Player.astro b/src/components/Player.astro
index da92138..d6be9be 100644
--- a/src/components/Player.astro
+++ b/src/components/Player.astro
@@ -39,7 +39,7 @@ const initialQueue = await Promise.all(
 <div
   id="player"
   class:list={[
-    "fixed right-0 bottom-0 left-0 z-100 bg-black shadow-lg",
+    "fixed right-0 bottom-0 left-0 z-100 rounded bg-black shadow-lg/75 md:right-3 md:bottom-3 md:left-3",
     height
   ]}
   transition:persist=""
@@ -48,7 +48,7 @@ const initialQueue = await Promise.all(
 >
   <div
     id="player:time:progress"
-    class="relative top-0 right-0 left-0 m-0 h-2 w-full bg-gray-900 p-0 hover:cursor-pointer"
+    class="relative top-0 right-0 left-0 m-0 h-2 w-full rounded-t bg-gray-900 p-0 hover:cursor-pointer"
   >
     <div
       id="player:time:progress:buffered"
@@ -61,7 +61,7 @@ const initialQueue = await Promise.all(
     >
     </div>
   </div>
-  <div class="p-2 text-white">
+  <div class="p-2 text-white md:p-3">
     <div class="grid grid-cols-2 text-xs">
       <span id="player:times:current" class="col-span-1 text-left">0:00</span>
       <span id="player:times:duration" class="col-span-1 text-right">0:00</span>
@@ -92,7 +92,7 @@ const initialQueue = await Promise.all(
     </div>
   </div>
 </div>
-<div class:list={[height]}></div>
+<div class:list={[height, "bg-gray-900"]}></div>
 
 <script is:inline src="/js/howler.min.js"></script>
 <script is:inline define:vars={{ initialQueue }}>