mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
cucadmuh
c9b2d140d9
* 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
25 lines
722 B
TypeScript
25 lines
722 B
TypeScript
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,
|
|
};
|
|
}
|