fix mpris text

modules/bar/Mpris.qml

@@ -6,15 +6,13 @@ import qs.settings
 import qs.reusables
 
 Rectangle {
-    id: container
+    id: root
     visible: root.spotify != null
     radius: implicitHeight / 2
-    color: clickHandler.containsMouse ? Colors.primaryContainer : Colors.surfaceContainer
-    implicitWidth: root.implicitWidth + 20
     implicitHeight: Settings.config.barHeight - 10
-    Item {
+    color: clickHandler.containsMouse ? Colors.primary : Colors.surfaceContainer
-        id: root
+    implicitWidth: statusRow.width + 20
-        anchors.centerIn: parent
+
     property var spotify: root.getSpotify()
     function getSpotify() {
         for (let i = 0; i < Mpris.players.values.length; i++) {
@@ -24,27 +22,28 @@ Rectangle {
         }
         return null;
     }
-        implicitWidth: statusRow.implicitWidth
-        implicitHeight: statusRow.implicitHeight
 
     RowLayout {
         id: statusRow
         spacing: 5
-            anchors.verticalCenter: parent.verticalCenter
+        anchors.centerIn: parent
         property var combinedText: root.spotify != null ? root.spotify.trackArtist + " - " + root.spotify.trackTitle : ""
         property var status: root.spotify != null ? !root.spotify.isPlaying ? "play_arrow" : "pause" : ""
         CustomText {
             id: mprisText
+            Layout.maximumWidth: 300
             Layout.topMargin: 2
             text: root.spotify != null ? parent.combinedText : ""
+            elide: Text.ElideRight
+            color: clickHandler.containsMouse ? Colors.onPrimaryColor : Colors.onSurfaceColor
         }
         CustomIcon {
             id: mprisStatus
+            color: clickHandler.containsMouse ? Colors.onPrimaryColor : Colors.onSurfaceColor
             Layout.topMargin: 2
             text: root.spotify != null ? parent.status : ""
         }
     }
-    }
     MouseArea {
         id: clickHandler
         anchors.fill: parent