dock: fix context menu overflow

fixes #2287

quickshell/Modules/DankBar/Widgets/AppsDockContextMenu.qml

@@ -171,12 +171,14 @@ PanelWindow {
                 }
 
                 Rectangle {
+                    implicitWidth: Theme.spacingS + windowTitle.implicitWidth + Theme.spacingXS + closeButton.width + Theme.spacingXS
                     width: parent.width
                     height: 28
                     radius: Theme.cornerRadius
                     color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     StyledText {
+                        id: windowTitle
                         anchors.left: parent.left
                         anchors.leftMargin: Theme.spacingS
                         anchors.right: closeButton.left
@@ -261,43 +263,43 @@ PanelWindow {
                 model: root.desktopEntry && root.desktopEntry.actions ? root.desktopEntry.actions : []
 
                 Rectangle {
+                    implicitWidth: Theme.spacingS * 2 + (actionIcon.visible ? actionIcon.width + Theme.spacingXS : 0) + actionLabel.implicitWidth
                     width: parent.width
                     height: 28
                     radius: Theme.cornerRadius
                     color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
-                    Row {
+                    Item {
+                        id: actionIcon
                         anchors.left: parent.left
                         anchors.leftMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 16
+                        height: 16
+                        visible: modelData.icon && modelData.icon !== ""
+
+                        IconImage {
+                            anchors.fill: parent
+                            source: modelData.icon ? Paths.resolveIconPath(modelData.icon) : ""
+                            smooth: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+                    }
+
+                    StyledText {
+                        id: actionLabel
+                        anchors.left: actionIcon.visible ? actionIcon.right : parent.left
+                        anchors.leftMargin: actionIcon.visible ? Theme.spacingXS : Theme.spacingS
                         anchors.right: parent.right
                         anchors.rightMargin: Theme.spacingS
                         anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingXS
+                        text: modelData.name || ""
-
+                        font.pixelSize: Theme.fontSizeSmall
-                        Item {
+                        color: Theme.surfaceText
-                            anchors.verticalCenter: parent.verticalCenter
+                        font.weight: Font.Normal
-                            width: 16
+                        elide: Text.ElideRight
-                            height: 16
+                        wrapMode: Text.NoWrap
-                            visible: modelData.icon && modelData.icon !== ""
-
-                            IconImage {
-                                anchors.fill: parent
-                                source: modelData.icon ? Paths.resolveIconPath(modelData.icon) : ""
-                                smooth: true
-                                asynchronous: true
-                                visible: status === Image.Ready
-                            }
-                        }
-
-                        StyledText {
-                            anchors.verticalCenter: parent.verticalCenter
-                            text: modelData.name || ""
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                            font.weight: Font.Normal
-                            elide: Text.ElideRight
-                            wrapMode: Text.NoWrap
-                        }
                     }
 
                     DankRipple {
@@ -336,12 +338,14 @@ PanelWindow {
 
             Rectangle {
                 visible: !root.hidePin
+                implicitWidth: Theme.spacingS * 2 + pinLabel.implicitWidth
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
                 color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                 StyledText {
+                    id: pinLabel
                     anchors.left: parent.left
                     anchors.leftMargin: Theme.spacingS
                     anchors.right: parent.right
@@ -396,12 +400,14 @@ PanelWindow {
 
             Rectangle {
                 visible: !root.isDmsWindow && root.desktopEntry && SessionService.nvidiaCommand
+                implicitWidth: Theme.spacingS * 2 + nvidiaLabel.implicitWidth
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
                 color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                 StyledText {
+                    id: nvidiaLabel
                     anchors.left: parent.left
                     anchors.leftMargin: Theme.spacingS
                     anchors.right: parent.right
@@ -438,12 +444,14 @@ PanelWindow {
 
             Rectangle {
                 visible: root.appData && (root.appData.type === "window" || (root.appData.type === "grouped" && root.appData.windowCount > 0))
+                implicitWidth: Theme.spacingS * 2 + closeLabel.implicitWidth
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
                 color: closeArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
 
                 StyledText {
+                    id: closeLabel
                     anchors.left: parent.left
                     anchors.leftMargin: Theme.spacingS
                     anchors.right: parent.right

quickshell/Modules/Dock/DockContextMenu.qml

@@ -31,12 +31,14 @@ DockContextMenuBase {
         }
 
         Rectangle {
+            implicitWidth: Theme.spacingS + windowTitle.implicitWidth + Theme.spacingXS + closeButton.width + Theme.spacingXS
             width: parent.width
             height: 28
             radius: Theme.cornerRadius
             color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
             StyledText {
+                id: windowTitle
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingS
                 anchors.right: closeButton.left
@@ -121,43 +123,43 @@ DockContextMenuBase {
         model: root.desktopEntry && root.desktopEntry.actions ? root.desktopEntry.actions : []
 
         Rectangle {
+            implicitWidth: Theme.spacingS * 2 + (actionIcon.visible ? actionIcon.width + Theme.spacingXS : 0) + actionLabel.implicitWidth
             width: parent.width
             height: 28
             radius: Theme.cornerRadius
             color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
-            Row {
+            Item {
+                id: actionIcon
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                width: 16
+                height: 16
+                visible: modelData.icon && modelData.icon !== ""
+
+                IconImage {
+                    anchors.fill: parent
+                    source: modelData.icon ? Paths.resolveIconPath(modelData.icon) : ""
+                    smooth: true
+                    asynchronous: true
+                    visible: status === Image.Ready
+                }
+            }
+
+            StyledText {
+                id: actionLabel
+                anchors.left: actionIcon.visible ? actionIcon.right : parent.left
+                anchors.leftMargin: actionIcon.visible ? Theme.spacingXS : Theme.spacingS
                 anchors.right: parent.right
                 anchors.rightMargin: Theme.spacingS
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingXS
+                text: modelData.name || ""
-
+                font.pixelSize: Theme.fontSizeSmall
-                Item {
+                color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
+                font.weight: Font.Normal
-                    width: 16
+                elide: Text.ElideRight
-                    height: 16
+                wrapMode: Text.NoWrap
-                    visible: modelData.icon && modelData.icon !== ""
-
-                    IconImage {
-                        anchors.fill: parent
-                        source: modelData.icon ? Paths.resolveIconPath(modelData.icon) : ""
-                        smooth: true
-                        asynchronous: true
-                        visible: status === Image.Ready
-                    }
-                }
-
-                StyledText {
-                    anchors.verticalCenter: parent.verticalCenter
-                    text: modelData.name || ""
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    font.weight: Font.Normal
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
-                }
             }
 
             DankRipple {
@@ -196,36 +198,36 @@ DockContextMenuBase {
 
     Rectangle {
         visible: !root.hidePin
+        implicitWidth: Theme.spacingS * 2 + pinIcon.width + Theme.spacingXS + pinLabel.implicitWidth
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
         color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
-        Row {
+        DankIcon {
+            id: pinIcon
             anchors.left: parent.left
             anchors.leftMargin: Theme.spacingS
+            anchors.verticalCenter: parent.verticalCenter
+            name: root.appData && root.appData.isPinned ? "keep_off" : "push_pin"
+            size: 14
+            color: Theme.surfaceText
+            opacity: 0.7
+        }
+
+        StyledText {
+            id: pinLabel
+            anchors.left: pinIcon.right
+            anchors.leftMargin: Theme.spacingXS
             anchors.right: parent.right
             anchors.rightMargin: Theme.spacingS
             anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingXS
+            text: root.appData && root.appData.isPinned ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
-
+            font.pixelSize: Theme.fontSizeSmall
-            DankIcon {
+            color: Theme.surfaceText
-                anchors.verticalCenter: parent.verticalCenter
+            font.weight: Font.Normal
-                name: root.appData && root.appData.isPinned ? "keep_off" : "push_pin"
+            elide: Text.ElideRight
-                size: 14
+            wrapMode: Text.NoWrap
-                color: Theme.surfaceText
-                opacity: 0.7
-            }
-
-            StyledText {
-                anchors.verticalCenter: parent.verticalCenter
-                text: root.appData && root.appData.isPinned ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceText
-                font.weight: Font.Normal
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
-            }
         }
 
         DankRipple {
@@ -269,36 +271,36 @@ DockContextMenuBase {
 
     Rectangle {
         visible: !root.isDmsWindow && root.desktopEntry && SessionService.nvidiaCommand
+        implicitWidth: Theme.spacingS * 2 + nvidiaIcon.width + Theme.spacingXS + nvidiaLabel.implicitWidth
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
         color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
-        Row {
+        DankIcon {
+            id: nvidiaIcon
             anchors.left: parent.left
             anchors.leftMargin: Theme.spacingS
+            anchors.verticalCenter: parent.verticalCenter
+            name: "memory"
+            size: 14
+            color: Theme.surfaceText
+            opacity: 0.7
+        }
+
+        StyledText {
+            id: nvidiaLabel
+            anchors.left: nvidiaIcon.right
+            anchors.leftMargin: Theme.spacingXS
             anchors.right: parent.right
             anchors.rightMargin: Theme.spacingS
             anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingXS
+            text: I18n.tr("Launch on dGPU")
-
+            font.pixelSize: Theme.fontSizeSmall
-            DankIcon {
+            color: Theme.surfaceText
-                anchors.verticalCenter: parent.verticalCenter
+            font.weight: Font.Normal
-                name: "memory"
+            elide: Text.ElideRight
-                size: 14
+            wrapMode: Text.NoWrap
-                color: Theme.surfaceText
-                opacity: 0.7
-            }
-
-            StyledText {
-                anchors.verticalCenter: parent.verticalCenter
-                text: I18n.tr("Launch on dGPU")
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceText
-                font.weight: Font.Normal
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
-            }
         }
 
         DankRipple {
@@ -324,36 +326,36 @@ DockContextMenuBase {
 
     Rectangle {
         visible: root.appData && (root.appData.type === "window" || (root.appData.type === "grouped" && root.appData.windowCount > 0))
+        implicitWidth: Theme.spacingS * 2 + closeIcon.width + Theme.spacingXS + closeLabel.implicitWidth
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
         color: closeArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
 
-        Row {
+        DankIcon {
+            id: closeIcon
             anchors.left: parent.left
             anchors.leftMargin: Theme.spacingS
+            anchors.verticalCenter: parent.verticalCenter
+            name: "close"
+            size: 14
+            color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
+            opacity: 0.7
+        }
+
+        StyledText {
+            id: closeLabel
+            anchors.left: closeIcon.right
+            anchors.leftMargin: Theme.spacingXS
             anchors.right: parent.right
             anchors.rightMargin: Theme.spacingS
             anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingXS
+            text: root.appData && root.appData.type === "grouped" ? I18n.tr("Close All Windows") : I18n.tr("Close Window")
-
+            font.pixelSize: Theme.fontSizeSmall
-            DankIcon {
+            color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
-                anchors.verticalCenter: parent.verticalCenter
+            font.weight: Font.Normal
-                name: "close"
+            elide: Text.ElideRight
-                size: 14
+            wrapMode: Text.NoWrap
-                color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
-                opacity: 0.7
-            }
-
-            StyledText {
-                anchors.verticalCenter: parent.verticalCenter
-                text: root.appData && root.appData.type === "grouped" ? I18n.tr("Close All Windows") : I18n.tr("Close Window")
-                font.pixelSize: Theme.fontSizeSmall
-                color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
-                font.weight: Font.Normal
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
-            }
         }
 
         DankRipple {