move vol to right on large screens

components/PlaybackControls.tsx

@@ -24,7 +24,7 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
   setVolume,
   changeChannel,
 }) => (
-  <div className="flex w-full items-center justify-between gap-2">
+  <div className="flex w-full items-center justify-between sm:justify-start sm:gap-8">
     {/* Left Side - Playback Controls */}
     <div className="flex shrink-0 items-center space-x-1">
       <button
@@ -49,31 +49,30 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
       >
         <SkipForward size={14} className="sm:h-4 sm:w-4" />
       </button>
-    </div>
-
-    {/* Right Side - Volume Control */}
-    <div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
-      <button
-        onClick={() => setVolume(volume === 0 ? 0.5 : 0)}
-        className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
-      >
-        {volume === 0 ? (
-          <VolumeX size={14} className="sm:h-4 sm:w-4" />
-        ) : volume < 0.5 ? (
-          <Volume1 size={14} className="sm:h-4 sm:w-4" />
-        ) : (
-          <Volume2 size={14} className="sm:h-4 sm:w-4" />
-        )}
-      </button>
-      <input
-        type="range"
-        min={0}
-        max={1}
-        step={0.01}
-        value={volume}
-        onChange={(e) => setVolume(parseFloat(e.target.value))}
-        className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
-      />
+      {/* Right Side - Volume Control */}
+      <div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
+        <button
+          onClick={() => setVolume(volume === 0 ? 0.5 : 0)}
+          className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
+        >
+          {volume === 0 ? (
+            <VolumeX size={14} className="sm:h-4 sm:w-4" />
+          ) : volume < 0.5 ? (
+            <Volume1 size={14} className="sm:h-4 sm:w-4" />
+          ) : (
+            <Volume2 size={14} className="sm:h-4 sm:w-4" />
+          )}
+        </button>
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.01}
+          value={volume}
+          onChange={(e) => setVolume(parseFloat(e.target.value))}
+          className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
+        />
+      </div>
     </div>
   </div>
 )