From 22ca356fb50af6ae84425193e239f05e4bcc9db5 Mon Sep 17 00:00:00 2001
From: Damocles <damocles@darkest.space>
Date: Sat, 18 Apr 2026 14:21:00 +0200
Subject: [PATCH] wrap mpris player selection pills into multiple rows with
 Flow

---
 shell/applets/MprisApplet.qml | 78 ++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/shell/applets/MprisApplet.qml b/shell/applets/MprisApplet.qml
index 1dd4de6..e06c531 100644
--- a/shell/applets/MprisApplet.qml
+++ b/shell/applets/MprisApplet.qml
@@ -306,58 +306,50 @@ Column {
     // Player switcher
     Item {
         width: root.width
-        height: root.players.length > 1 ? 28 : 0
+        height: root.players.length > 1 ? _playerFlow.implicitHeight + 6 : 0
         visible: root.players.length > 1
 
-        Flickable {
-            id: _switcher
-            anchors.centerIn: parent
-            width: Math.min(_playerRow.implicitWidth, parent.width - 16)
-            height: 22
-            contentWidth: _playerRow.implicitWidth
-            clip: true
+        Flow {
+            id: _playerFlow
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - 16
+            spacing: 6
 
-            Row {
-                id: _playerRow
-                height: 22
-                spacing: 6
+            Repeater {
+                model: root.players
 
-                Repeater {
-                    model: root.players
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
 
-                    delegate: Rectangle {
-                        required property var modelData
-                        required property int index
+                    readonly property bool _active: index === root.playerIdx
 
-                        readonly property bool _active: index === root.playerIdx
+                    width: _pLabel.implicitWidth + 12
+                    height: 18
+                    radius: 9
+                    color: _active ? S.Theme.base02 : (pHover.hovered ? S.Theme.base02 : "transparent")
+                    border.color: _active ? root.accentColor : S.Theme.base03
+                    border.width: _active ? 1 : 0
 
-                        width: _pLabel.implicitWidth + 12
-                        height: 18
-                        radius: 9
-                        color: _active ? S.Theme.base02 : (pHover.hovered ? S.Theme.base02 : "transparent")
-                        border.color: _active ? root.accentColor : S.Theme.base03
-                        border.width: _active ? 1 : 0
-                        anchors.verticalCenter: parent.verticalCenter
+                    Text {
+                        id: _pLabel
+                        anchors.centerIn: parent
+                        text: modelData.identity ?? "Player"
+                        color: _active ? root.accentColor : S.Theme.base04
+                        font.pixelSize: S.Theme.fontSize - 2
+                        font.family: S.Theme.fontFamily
+                        font.bold: _active
+                    }
 
-                        Text {
-                            id: _pLabel
-                            anchors.centerIn: parent
-                            text: modelData.identity ?? "Player"
-                            color: _active ? root.accentColor : S.Theme.base04
-                            font.pixelSize: S.Theme.fontSize - 2
-                            font.family: S.Theme.fontFamily
-                            font.bold: _active
-                        }
+                    HoverHandler {
+                        id: pHover
+                        cursorShape: Qt.PointingHandCursor
+                    }
 
-                        HoverHandler {
-                            id: pHover
-                            cursorShape: Qt.PointingHandCursor
-                        }
-
-                        TapHandler {
-                            onTapped: {
-                                root.playerSwitched(index);
-                            }
+                    TapHandler {
+                        onTapped: {
+                            root.playerSwitched(index);
                         }
                     }
                 }