fix(ui): shrink-wrap floating player bar instead of full-width strip (#969)

* fix(ui): shrink-wrap floating player bar instead of full-width strip

The bar used fixed left and right insets, which stretched its background
across the whole main column. Center it with max-content width so only
the pill-shaped controls are painted, and soften the drop shadow.

* docs: note PR #969 in changelog and settings credits

src/hooks/computeFloatingPlayerBarStyle.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+
+const HORIZONTAL_MARGIN_PX = 24;
+
+/** Center the floating bar in the main column; shrink-wrap width instead of stretching. */
+export function computeFloatingPlayerBarStyle(
+  sidebarRight: number,
+  queueLeft: number | null,
+  viewportWidth: number,
+): CSSProperties {
+  const contentLeft = sidebarRight;
+  const contentRight = queueLeft ?? viewportWidth;
+  const contentWidth = Math.max(0, contentRight - contentLeft);
+  const maxWidth = Math.max(100, contentWidth - HORIZONTAL_MARGIN_PX * 2);
+  const centerX = contentLeft + contentWidth / 2;
+
+  return {
+    left: centerX,
+    right: 'auto',
+    transform: 'translateX(-50%)',
+    width: 'max-content',
+    maxWidth,
+  };
+}