CSS adjustments for small screens/mobile for the song duration bar and UI buttons

static/styles.css

@@ -561,6 +561,7 @@ body {
     overflow: hidden;
     display: none;
     align-items: center;
+    z-index: 1000;
 }
 
 .song-duration-fill {
@@ -595,6 +596,7 @@ body {
     display: inline-block;
     padding-left: 100%;
     animation: scroll 15s linear infinite;
+    padding-right: 20px; /* Add padding to prevent overlap with timer */
 }
 
 @keyframes scroll {
@@ -610,6 +612,68 @@ body {
     flex-shrink: 0;
 }
 
+/* Updated styles for mobile */
+@media screen and (max-width: 600px) {
+    .song-duration-bar {
+        top: 10px;
+        left: auto;
+        right: 10px;
+        transform: none;
+        width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
+        max-width: 200px; /* Limit maximum width */
+        height: 20px;
+        border-radius: 10px;
+    }
+
+    #ui {
+        display: flex;
+        align-items: center;
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        z-index: 1001; /* Ensure UI is above song duration bar */
+    }
+
+    #ui button {
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
+    #songName {
+        font-size: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-grow: 1; /* Allow song name to take up available space */
+    }
+
+    #songTimer {
+        font-size: 10px;
+        margin-left: 5px;
+        flex-shrink: 0; /* Prevent timer from shrinking */
+    }
+
+    .song-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 0 5px;
+    }
+}
+
+/* Additional adjustments for very small screens */
+@media screen and (max-width: 400px) {
+    .song-duration-bar {
+        width: calc(100% - 120px); /* Slightly more space on very small screens */
+    }
+
+    #songName, #songTimer {
+        font-size: 9px;
+    }
+}
+
+
 .skin-option.glow-effect {
     box-shadow: 0 0 10px 3px currentColor;
     animation: glow 1.5s ease-in-out infinite alternate;