Update focused app & media control screen response

Modules/TopBar/FocusedApp.qml

@@ -5,7 +5,64 @@ import qs.Services
 Rectangle {
     id: root
 
-    width: Math.max(contentRow.implicitWidth + Theme.spacingS * 2, 60)
+    // Dynamic screen detection for laptop vs desktop monitor
+    readonly property bool isSmallScreen: {
+        // Walk up the parent chain to find the TopBar PanelWindow
+        let current = root.parent
+        while (current && !current.screen) {
+            current = current.parent
+        }
+        
+        if (!current || !current.screen) {
+            return true  // Default to small if we can't detect
+        }
+        
+        const s = current.screen
+        
+        // Multi-method detection for laptop/small screens:
+        
+        // Method 1: Check screen name for laptop indicators
+        const screenName = (s.name || "").toLowerCase()
+        if (screenName.includes("edp") || screenName.includes("lvds")) {
+            return true
+        }
+        
+        // Method 2: Check pixel density if available
+        try {
+            if (s.pixelDensity && s.pixelDensity > 1.5) {
+                return true
+            }
+        } catch (e) { /* ignore */ }
+        
+        // Method 3: Check device pixel ratio if available
+        try {
+            if (s.devicePixelRatio && s.devicePixelRatio > 1.25) {
+                return true
+            }
+        } catch (e) { /* ignore */ }
+        
+        // Method 4: Resolution-based fallback for smaller displays
+        if (s.width <= 1920 && s.height <= 1200) {
+            return true
+        }
+        
+        // Method 5: Check for high-res laptop displays
+        if ((s.width === 2400 && s.height === 1600) || 
+            (s.width === 2560 && s.height === 1600) ||
+            (s.width === 2880 && s.height === 1800)) {
+            return true
+        }
+        
+        return false  // Default to large screen
+    }
+    
+    // Dynamic sizing based on screen type
+    readonly property int maxWidth: isSmallScreen ? 288 : 456
+    readonly property int appNameMaxWidth: isSmallScreen ? 130 : 180
+    readonly property int separatorWidth: 15
+    readonly property int titleMaxWidth: maxWidth - appNameMaxWidth - separatorWidth - (Theme.spacingS * 2)
+
+    width: Math.min(contentRow.implicitWidth + Theme.spacingS * 2, maxWidth)
     height: 30
     radius: Theme.cornerRadius
     color: mouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
@@ -26,10 +83,10 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
-            // Limit app name width
+            // App name gets reasonable space - only truncate if absolutely necessary
             elide: Text.ElideRight
             maximumLineCount: 1
-            width: Math.min(implicitWidth, 120)
+            width: Math.min(implicitWidth, root.appNameMaxWidth)
         }
 
         Text {
@@ -48,10 +105,10 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
-            // Limit title width - increased for longer titles
+            // Window title gets remaining space and shows ellipsis when truncated
             elide: Text.ElideRight
             maximumLineCount: 1
-            width: Math.min(implicitWidth, 350)
+            width: Math.min(implicitWidth, root.titleMaxWidth)
         }
 
     }

Modules/TopBar/Media.qml

@@ -9,6 +9,58 @@ Rectangle {
 
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
     readonly property bool playerAvailable: activePlayer !== null
+    
+    // Screen detection for responsive design (same logic as FocusedApp)
+    readonly property bool isSmallScreen: {
+        // Walk up the parent chain to find the TopBar PanelWindow
+        let current = root.parent
+        while (current && !current.screen) {
+            current = current.parent
+        }
+        
+        if (!current || !current.screen) {
+            return true  // Default to small if we can't detect
+        }
+        
+        const s = current.screen
+        
+        // Multi-method detection for laptop/small screens:
+        
+        // Method 1: Check screen name for laptop indicators
+        const screenName = (s.name || "").toLowerCase()
+        if (screenName.includes("edp") || screenName.includes("lvds")) {
+            return true
+        }
+        
+        // Method 2: Check pixel density if available
+        try {
+            if (s.pixelDensity && s.pixelDensity > 1.5) {
+                return true
+            }
+        } catch (e) { /* ignore */ }
+        
+        // Method 3: Check device pixel ratio if available
+        try {
+            if (s.devicePixelRatio && s.devicePixelRatio > 1.25) {
+                return true
+            }
+        } catch (e) { /* ignore */ }
+        
+        // Method 4: Resolution-based fallback for smaller displays
+        if (s.width <= 1920 && s.height <= 1200) {
+            return true
+        }
+        
+        // Method 5: Check for high-res laptop displays
+        if ((s.width === 2400 && s.height === 1600) || 
+            (s.width === 2560 && s.height === 1600) ||
+            (s.width === 2880 && s.height === 1800)) {
+            return true
+        }
+        
+        return false  // Default to large screen
+    }
+    
     readonly property int contentWidth: Math.min(280, mediaRow.implicitWidth + Theme.spacingS * 2)
 
     signal clicked()
@@ -93,6 +145,7 @@ Rectangle {
 
                 anchors.verticalCenter: parent.verticalCenter
                 width: 140
+                visible: !root.isSmallScreen  // Hide title text on small screens
                 text: {
                     if (!activePlayer || !activePlayer.trackTitle)
                         return "";