Possibly fixed #117, format and also change a tiny thing in ActiveWindow

MediaMini: properly elide and manage width of MediaMini
ActiveWindow: Make it respect width of ActiveWindow title

Modules/Bar/Widgets/ActiveWindow.qml

@@ -41,14 +41,15 @@ Row {
   NText {
     id: fullTitleMetrics
     visible: false
-    text: titleText.text
+    text: getTitle()
-    font: titleText.font
+    font.pointSize: Style.fontSizeS * scaling
+    font.weight: Style.fontWeightMedium
   }
 
   Rectangle {
     // Let the Rectangle size itself based on its content (the Row)
     visible: root.visible
-    width: row.width + Style.marginM * scaling * 2
+    width: row.width + Style.marginS * scaling
     height: Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
     color: Color.mSurfaceVariant
@@ -60,6 +61,7 @@ Row {
       anchors.fill: parent
       anchors.leftMargin: Style.marginS * scaling
       anchors.rightMargin: Style.marginS * scaling
+      clip: true
 
       Row {
         id: row
@@ -86,9 +88,10 @@ Row {
         NText {
           id: titleText
 
-          // Collapsed width when not hovered, expand on hover
+          // For short titles, show full. For long titles, truncate and expand on hover
-          width: mouseArea.containsMouse ? Math.min(fullTitleMetrics.contentWidth + (Style.marginS * scaling),
+          width: mouseArea.containsMouse ? Math.min(fullTitleMetrics.contentWidth + 8,
-                                                    400 * scaling) : (minWidth * scaling)
+                                                    400 * scaling) : Math.min(fullTitleMetrics.contentWidth + 12,
+                                                                              200 * scaling)
           horizontalAlignment: Text.AlignLeft
           text: getTitle()
           font.pointSize: Style.fontSizeS * scaling

Modules/Bar/Widgets/MediaMini.qml

@@ -26,8 +26,9 @@ Row {
   NText {
     id: fullTitleMetrics
     visible: false
-    text: titleText.text
+    text: getTitle()
-    font: titleText.font
+    font.pointSize: Style.fontSizeS * scaling
+    font.weight: Style.fontWeightMedium
   }
 
   Rectangle {
@@ -49,6 +50,37 @@ Row {
       width: 200 * scaling
     }
 
+    // Mouse area for hover detection - direct child of Rectangle
+    MouseArea {
+      id: mouseArea
+      anchors.fill: parent
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+      onClicked: mouse => {
+                   if (mouse.button === Qt.LeftButton) {
+                     MediaService.playPause()
+                   } else if (mouse.button == Qt.RightButton) {
+                     MediaService.next()
+                     // Need to hide the tooltip instantly
+                     tooltip.visible = false
+                   } else if (mouse.button == Qt.MiddleButton) {
+                     MediaService.previous()
+                     // Need to hide the tooltip instantly
+                     tooltip.visible = false
+                   }
+                 }
+
+      onEntered: {
+        if (tooltip.text !== "") {
+          tooltip.show()
+        }
+      }
+      onExited: {
+        tooltip.hide()
+      }
+    }
+
     Item {
       id: mainContainer
       anchors.fill: parent
@@ -140,18 +172,18 @@ Row {
         NText {
           id: titleText
 
-          // If hovered or just switched window, show up to 400 pixels
+          // If hovered, show up to 400 pixels, otherwise show up to 120 pixels
-          // If not hovered show up to 120 pixels
+          width: (mouseArea.containsMouse) ? Math.min(fullTitleMetrics.contentWidth + (Style.marginS * scaling),
-          width: (mouseArea.containsMouse) ? Math.min(fullTitleMetrics.contentWidth,
+                                                      400 * scaling) : Math.min(
-                                                      400 * scaling) : Math.min(fullTitleMetrics.contentWidth,
+                                               fullTitleMetrics.contentWidth + (Style.marginS * scaling), 120 * scaling)
-                                                                                120 * scaling)
           text: getTitle()
           font.pointSize: Style.fontSizeS * scaling
           font.weight: Style.fontWeightMedium
-          elide: Text.ElideRight
+          elide: mouseArea.containsMouse ? Text.ElideNone : Text.ElideRight
           anchors.verticalCenter: parent.verticalCenter
           verticalAlignment: Text.AlignVCenter
           color: Color.mTertiary
+          clip: true
 
           Behavior on width {
             NumberAnimation {
@@ -161,37 +193,6 @@ Row {
           }
         }
       }
-
-      // Mouse area for hover detection
-      MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-        onClicked: mouse => {
-                     if (mouse.button === Qt.LeftButton) {
-                       MediaService.playPause()
-                     } else if (mouse.button == Qt.RightButton) {
-                       MediaService.next()
-                       // Need to hide the tooltip instantly
-                       tooltip.visible = false
-                     } else if (mouse.button == Qt.MiddleButton) {
-                       MediaService.previous()
-                       // Need to hide the tooltip instantly
-                       tooltip.visible = false
-                     }
-                   }
-
-        onEntered: {
-          if (tooltip.text !== "") {
-            tooltip.show()
-          }
-        }
-        onExited: {
-          tooltip.hide()
-        }
-      }
     }
   }