minor ui change

frontend/src/components/NowPlayingBar.tsx

@@ -910,13 +910,15 @@ export function NowPlayingBar({ isLogsOpen = false, logsDrawerHeight = 256, isVi
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
       >
-        {/* Swipe indicator - only on mobile */}
-        <div className="md:hidden flex justify-center pt-2 pb-1">
-          <div className="w-10 h-1 bg-muted-foreground/30 rounded-full" />
-        </div>
+        {/* Max-width container to match page layout */}
+        <div className="max-w-5xl mx-auto relative">
+          {/* Swipe indicator - only on mobile */}
+          <div className="md:hidden flex justify-center pt-2 pb-1">
+            <div className="w-10 h-1 bg-muted-foreground/30 rounded-full" />
+          </div>
 
-        {/* Header with action buttons */}
-        <div className="absolute top-3 right-3 flex items-center gap-1 z-10">
+          {/* Header with action buttons */}
+          <div className="absolute top-3 right-3 sm:right-4 flex items-center gap-1 z-10">
           {/* Queue button - mobile only, when playlist exists */}
           {isPlaying && status?.playlist && (
             <Button
@@ -1309,6 +1311,7 @@ export function NowPlayingBar({ isLogsOpen = false, logsDrawerHeight = 256, isVi
             </div>
           )}
         </div>
+        </div>{/* Close max-width container */}
       </div>
 
       {/* Queue Dialog */}

frontend/src/pages/PlaylistsPage.tsx

@@ -729,7 +729,10 @@ export function PlaylistsPage() {
                         variant="secondary"
                         size="icon"
                         className="w-7 h-7 sm:w-8 sm:h-8"
-                        onClick={() => setPauseTime(Math.max(0, pauseTime - 1))}
+                        onClick={() => {
+                          const step = pauseUnit === 'hr' ? 0.5 : 1
+                          setPauseTime(Math.max(0, pauseTime - step))
+                        }}
                       >
                         <span className="material-icons-outlined text-sm">remove</span>
                       </Button>
@@ -739,17 +742,20 @@ export function PlaylistsPage() {
                           const currentIndex = units.indexOf(pauseUnit)
                           setPauseUnit(units[(currentIndex + 1) % units.length])
                         }}
-                        className="relative flex items-center justify-center w-10 sm:w-12 text-xs sm:text-sm font-bold hover:text-primary transition"
+                        className="relative flex items-center justify-center min-w-14 sm:min-w-16 px-1 text-xs sm:text-sm font-bold hover:text-primary transition"
                         title="Click to change unit"
                       >
                         {pauseTime}{pauseUnit === 'sec' ? 's' : pauseUnit === 'min' ? 'm' : 'h'}
-                        <span className="material-icons-outlined text-xs opacity-50 scale-75 absolute -right-1">swap_vert</span>
+                        <span className="material-icons-outlined text-xs opacity-50 scale-75 ml-0.5">swap_vert</span>
                       </button>
                       <Button
                         variant="secondary"
                         size="icon"
                         className="w-7 h-7 sm:w-8 sm:h-8"
-                        onClick={() => setPauseTime(pauseTime + 1)}
+                        onClick={() => {
+                          const step = pauseUnit === 'hr' ? 0.5 : 1
+                          setPauseTime(pauseTime + step)
+                        }}
                       >
                         <span className="material-icons-outlined text-sm">add</span>
                       </Button>