fix(player): tighten player-bar density to spotify/lokal levels

package.json

@@ -22,7 +22,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-virtual": "^3.13.24",
+    "@tanstack/react-virtual": "^3.13.25",
     "@tauri-apps/api": "^2.11.0",
     "@tauri-apps/plugin-dialog": "^2.7.1",
     "@tauri-apps/plugin-opener": "^2.5.4",
@@ -52,6 +52,6 @@
     "sharp": "^0.34.5",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.4",
-    "vite": "^8.0.13"
+    "vite": "^8.0.14"
   }
 }

src/components/common/Artwork.tsx

@@ -71,10 +71,16 @@ export function Artwork({
     xl: "rounded-xl",
     "2xl": "rounded-2xl",
   }[rounded];
-  // Gradient + border combo reused as the placeholder background, both
-  // when no image is available and behind the fading <img>.
+  // Gradient placeholder reused as the background behind the fading
+  // <img>. The border is split off because it would otherwise consume
+  // 2 px inside the wrapper's content box (Tailwind defaults to
+  // `box-sizing: border-box`), shrinking the visible image by 2 px on
+  // every Artwork in the app. The border is invisible behind a loaded
+  // image anyway — keep it only on the no-src placeholder branch.
   const placeholderBg =
-    "bg-linear-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/40 dark:to-emerald-800/30 border border-emerald-200/60 dark:border-emerald-800/40";
+    "bg-linear-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/40 dark:to-emerald-800/30";
+  const placeholderBorder =
+    "border border-emerald-200/60 dark:border-emerald-800/40";
   const discIcon = (
     <Disc
       size={iconSize}
@@ -85,7 +91,7 @@ export function Artwork({
   if (!src) {
     return (
       <div
-        className={`${className} ${radiusClass} ${placeholderBg} flex items-center justify-center overflow-hidden shrink-0`}
+        className={`${className} ${radiusClass} ${placeholderBg} ${placeholderBorder} flex items-center justify-center overflow-hidden shrink-0`}
         aria-hidden={alt ? undefined : true}
         aria-label={alt}
         role={alt ? "img" : undefined}

src/components/player/AudioQualityFooter.tsx

@@ -19,7 +19,7 @@ interface AudioQualityFooterProps {
 export function AudioQualityFooter({ track }: AudioQualityFooterProps) {
   if (!track) {
     return (
-      <div className="h-6 px-6 border-t border-zinc-100 dark:border-zinc-800/60" />
+      <div className="h-5 px-4 border-t border-zinc-100 dark:border-zinc-800/60" />
     );
   }
 
@@ -42,7 +42,7 @@ export function AudioQualityFooter({ track }: AudioQualityFooterProps) {
   const hiRes = isHiRes(track.bit_depth, track.sample_rate);
 
   return (
-    <div className="h-6 px-6 flex items-center justify-between text-[11px] text-zinc-500 dark:text-zinc-400 border-t border-zinc-100 dark:border-zinc-800/60 bg-[#FAFAFA] dark:bg-surface-dark-elevated">
+    <div className="h-5 px-4 flex items-center justify-between text-[10px] text-zinc-500 dark:text-zinc-400 border-t border-zinc-100 dark:border-zinc-800/60 bg-[#FAFAFA] dark:bg-surface-dark-elevated">
       <span className="tabular-nums truncate">{leftBits.join(" · ")}</span>
       <span className="flex items-center gap-2 tabular-nums">
         {hiRes && (

src/components/player/PlaybackControls.tsx

@@ -34,7 +34,7 @@ export function PlaybackControls() {
   const isRepeatActive = repeatMode !== "off";
 
   return (
-    <div className="flex items-center space-x-6 mb-3">
+    <div className="flex items-center space-x-5 mb-1.5">
       <button
         type="button"
         onClick={toggleShuffle}
@@ -51,7 +51,7 @@ export function PlaybackControls() {
             : "text-zinc-400 hover:text-zinc-800 dark:hover:text-white"
         }`}
       >
-        <Shuffle size={18} />
+        <Shuffle size={20} />
       </button>
       <button
         type="button"
@@ -108,7 +108,7 @@ export function PlaybackControls() {
             : "text-zinc-400 hover:text-zinc-800 dark:hover:text-white"
         }`}
       >
-        <RepeatIcon size={18} />
+        <RepeatIcon size={20} />
       </button>
     </div>
   );