fix: playback controls block now wraps

src/pages/Player/PlaybackControls.tsx

@@ -14,29 +14,28 @@ type PlaybackControlsProps = {
 	onSpeedChange: (value: number) => void;
 };
 
-const BACKEND_LABELS: Record<BackendName, string> = {
-	mpv: "mpv",
-	none: "none",
-};
-
 export function PlaybackControls(props: PlaybackControlsProps) {
 	const { theme } = useTheme();
 	return (
 		<box
 			flexDirection="row"
+			flexWrap="wrap"
 			gap={1}
 			alignItems="center"
+			justifyContent="center"
 			border
 			padding={1}
 			borderColor={theme.border}
 		>
+			{/* transport buttons — wrap as a unit, centered on their own line */}
+			<box flexDirection="row" gap={1} alignItems="center" flexShrink={0}>
 				<box
 					border
 					padding={0}
 					onMouseDown={props.onPrev}
 					borderColor={theme.border}
 				>
-				<text fg={theme.primary}>[Prev]</text>
+					<text fg={theme.primary} wrapMode="none">[Prev]</text>
 				</box>
 				<box
 					border
@@ -44,7 +43,7 @@ export function PlaybackControls(props: PlaybackControlsProps) {
 					onMouseDown={props.onToggle}
 					borderColor={theme.border}
 				>
-				<text fg={theme.primary}>{props.isPlaying ? "[Pause]" : "[Play]"}</text>
+					<text fg={theme.primary} wrapMode="none">{props.isPlaying ? "[Pause]" : "[Play]"}</text>
 				</box>
 				<box
 					border
@@ -52,24 +51,34 @@ export function PlaybackControls(props: PlaybackControlsProps) {
 					onMouseDown={props.onNext}
 					borderColor={theme.border}
 				>
-				<text fg={theme.primary}>[Next]</text>
+					<text fg={theme.primary} wrapMode="none">[Next]</text>
 				</box>
-			<box flexDirection="row" gap={1} marginLeft={2}>
+			</box>
+			{/* status group — always follows the buttons; wrap point is here */}
+			<box
+				flexDirection="row"
+				gap={1}
+				alignItems="center"
+				marginLeft={2}
+				flexShrink={0}
+			>
 				<text fg={theme.textMuted}>Vol</text>
 				<text fg={theme.text}>{Math.round(props.volume * 100)}%</text>
 				<text fg={theme.textMuted}>↑↓</text>
-			</box>
 				<box flexDirection="row" gap={1} marginLeft={2}>
 					<text fg={theme.textMuted}>Speed</text>
 					<text fg={theme.text}>{props.speed}x</text>
 					<text fg={theme.textMuted}>s</text>
 				</box>
-			{props.backendName && props.backendName !== "none" && (
-				<box flexDirection="row" gap={1} marginLeft={2}>
-					<text fg={theme.textMuted}>via</text>
-					<text fg={theme.primary}>{BACKEND_LABELS[props.backendName]}</text>
 			</box>
-			)}
+			{/* audio warnings — wrap to their own (3rd) line when the row is tight */}
+			{(props.backendName === "none" || props.hasAudioUrl === false) && (
+				<box
+					flexDirection="row"
+					gap={1}
+					alignItems="center"
+					flexShrink={0}
+				>
 					{props.backendName === "none" && (
 						<box marginLeft={2}>
 							<text fg={theme.warning}>No audio player found</text>
@@ -81,5 +90,7 @@ export function PlaybackControls(props: PlaybackControlsProps) {
 						</box>
 					)}
 				</box>
+			)}
+		</box>
 	);
 }