fix(player): make PlayerBarGlass 100% responsive

- GlobalPlayer: responsive margins (left-2/right-2 on mobile, left-4/right-4 on sm+),
  bottom-4 on mobile, max-w-full min-w-0 to prevent overflow
- Inner flex: smaller gaps (gap-1.5 sm:gap-2 md:gap-3), reduced padding (px-2 sm:px-3 md:px-4),
  overflow-hidden to contain content
- PlayerBarTrackInfo: min-w-0 for shrink, smaller cover (w-9 on mobile, w-10 sm, w-11 md)
- PlayerBarRight: min-w-0, smaller gaps, hide PiP on <md, hide Like on <sm,
  hide volume divider on <sm, responsive volume slider width
- Hide PlaybackSpeedControl and time display on <sm to save space

apps/web/src/features/player/components/GlobalPlayer.tsx

@@ -97,8 +97,9 @@ export function GlobalPlayer() {
           role="region"
           aria-label="Global player"
           className={cn(
-            'fixed bottom-6 left-4 right-4 z-player transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
+            'fixed bottom-4 sm:bottom-6 left-2 right-2 sm:left-4 sm:right-4 z-player transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
-            'lg:right-4 w-player-bar',
+            'max-w-full min-w-0',
+            'lg:right-4 lg:w-player-bar',
             sidebarOpen ? 'lg:left-main-expanded lg:w-player-bar-expanded' : 'lg:left-main-collapsed lg:w-player-bar-collapsed',
             isExpanded && 'translate-y-full opacity-0 pointer-events-none',
           )}
@@ -106,7 +107,7 @@ export function GlobalPlayer() {
           onMouseLeave={() => setIsHovered(false)}
         >
           <PlayerBarGlass isHovered={isHovered}>
-            <div className="flex items-center justify-between gap-2 sm:gap-3 h-14 sm:h-16 px-3 sm:px-4 relative z-10 min-w-0 flex-nowrap">
+            <div className="flex items-center justify-between gap-1.5 sm:gap-2 md:gap-3 h-14 sm:h-16 px-2 sm:px-3 md:px-4 relative z-10 min-w-0 overflow-hidden flex-nowrap">
               <PlayerBarTrackInfo
                 title={displayTrack.title}
                 artist={displayTrack.artist || 'Unknown Artist'}
@@ -117,7 +118,7 @@ export function GlobalPlayer() {
               />
 
               <section
-                className="flex flex-col items-center justify-center gap-0.5 flex-shrink-0"
+                className="flex flex-col items-center justify-center gap-0.5 flex-shrink-0 min-w-0"
                 aria-label="Playback controls"
               >
                 <PlayerControls
@@ -139,14 +140,16 @@ export function GlobalPlayer() {
                   shuffle={player.shuffle}
                   repeat={player.repeat}
                 />
-                <PlaybackSpeedControl
+                <div className="hidden sm:block">
-                  speed={player.playbackSpeed}
+                  <PlaybackSpeedControl
-                  onSpeedChange={player.setPlaybackSpeed}
+                    speed={player.playbackSpeed}
-                  disabled={isIdle}
+                    onSpeedChange={player.setPlaybackSpeed}
-                />
+                    disabled={isIdle}
+                  />
+                </div>
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 text-xs font-mono text-muted-foreground whitespace-nowrap',
+                    'hidden sm:flex items-center gap-1.5 text-xs font-mono text-muted-foreground whitespace-nowrap shrink-0',
                     isIdle ? 'opacity-50' : 'opacity-90',
                   )}
                 >

apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx

@@ -40,7 +40,7 @@ export function PlayerBarRight({
 }: PlayerBarRightProps) {
   return (
     <section
-      className="flex items-center justify-end gap-1 sm:gap-2 flex-shrink-0 min-w-32 shrink-0"
+      className="flex items-center justify-end gap-0.5 sm:gap-1 md:gap-2 flex-shrink-0 min-w-0 shrink-0"
       aria-label="Volume and queue"
     >
       <div className="hidden xl:block shrink-0">
@@ -55,21 +55,22 @@ export function PlayerBarRight({
         >
           {muted || volume === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
         </Button>
-        <div className="w-0 group-hover/volume:w-14 overflow-hidden transition-all duration-150 ease-out">
+        <div className="w-0 group-hover/volume:w-12 sm:group-hover/volume:w-14 overflow-hidden transition-all duration-150 ease-out">
           <Slider
             value={[muted ? 0 : volume]}
             onValueChange={(val) => onVolumeChange(val[0] ?? 0)}
             max={100}
-            className="w-14 min-w-0"
+            className="w-12 sm:w-14 min-w-0"
           />
         </div>
       </div>
-      <div className="w-px h-5 bg-[var(--sumi-border-faint)] flex-shrink-0" />
+      <div className="hidden sm:block w-px h-5 bg-[var(--sumi-border-faint)] flex-shrink-0" />
       {pipSupported && onTogglePiP && (
         <Button
           variant="ghost"
           size="icon"
           className={cn(
+            'hidden md:flex',
             btnClass,
             pipActive ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground',
           )}
@@ -93,7 +94,7 @@ export function PlayerBarRight({
       <Button
         variant="ghost"
         size="icon"
-        className={cn(btnClass, 'text-muted-foreground hover:text-[var(--chart-2)] hover:bg-[var(--chart-2)]/10')}
+        className={cn('hidden sm:flex', btnClass, 'text-muted-foreground hover:text-[var(--chart-2)] hover:bg-[var(--chart-2)]/10')}
       >
         <Heart className="w-4 h-4" />
       </Button>

apps/web/src/features/player/components/player-bar/PlayerBarTrackInfo.tsx

@@ -25,12 +25,12 @@ export function PlayerBarTrackInfo({
 }: PlayerBarTrackInfoProps) {
   return (
     <section
-      className="flex items-center gap-2 min-w-24 flex-1 overflow-hidden"
+      className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1 overflow-hidden"
       aria-label="Track info"
     >
       <div
         className={cn(
-          'relative w-10 h-10 sm:w-11 sm:h-11 rounded-lg overflow-hidden flex-shrink-0',
+          'relative w-9 h-9 sm:w-10 sm:h-10 md:w-11 md:h-11 rounded-lg overflow-hidden flex-shrink-0',
           'transition-transform duration-300 ease-out',
           'hover:scale-105 active:scale-95',
           !isIdle && 'cursor-pointer group/art',