tray: more flexible overflow menu

.config/quickshell/ii/modules/bar/StyledPopup.qml

@@ -10,6 +10,7 @@ LazyLoader {
 
     property Item hoverTarget
     default property Item contentItem
+    property real popupBackgroundMargin: 0
 
     active: hoverTarget && hoverTarget.containsMouse
 
@@ -22,8 +23,8 @@ LazyLoader {
         anchors.top: Config.options.bar.vertical || (!Config.options.bar.vertical && !Config.options.bar.bottom)
         anchors.bottom: !Config.options.bar.vertical && Config.options.bar.bottom
 
-        implicitWidth: popupBackground.implicitWidth + Appearance.sizes.hyprlandGapsOut * 2
+        implicitWidth: popupBackground.implicitWidth + Appearance.sizes.hyprlandGapsOut * 2 + root.popupBackgroundMargin
-        implicitHeight: popupBackground.implicitHeight + Appearance.sizes.hyprlandGapsOut * 2
+        implicitHeight: popupBackground.implicitHeight + Appearance.sizes.hyprlandGapsOut * 2 + root.popupBackgroundMargin
 
         exclusionMode: ExclusionMode.Ignore
         exclusiveZone: 0
@@ -62,7 +63,13 @@ LazyLoader {
         Rectangle {
             id: popupBackground
             readonly property real margin: 10
-            anchors.centerIn: parent
+            anchors {
+                fill: parent
+                leftMargin: Appearance.sizes.hyprlandGapsOut + root.popupBackgroundMargin * (!popupWindow.anchors.left)
+                rightMargin: Appearance.sizes.hyprlandGapsOut + root.popupBackgroundMargin * (!popupWindow.anchors.right)
+                topMargin: Appearance.sizes.hyprlandGapsOut + root.popupBackgroundMargin * (!popupWindow.anchors.top)
+                bottomMargin: Appearance.sizes.hyprlandGapsOut + root.popupBackgroundMargin * (!popupWindow.anchors.bottom)
+            }
             implicitWidth: root.contentItem.implicitWidth + margin * 2
             implicitHeight: root.contentItem.implicitHeight + margin * 2
             color: ColorUtils.applyAlpha(Appearance.colors.colSurfaceContainer, 1 - Appearance.backgroundTransparency)

.config/quickshell/ii/modules/bar/SysTray.qml

@@ -18,6 +18,7 @@ Item {
     property bool invertPins: Config.options.bar.tray.invertPinnedItems
     property list<var> pinnedItems: invertPins ? itemsNotInUserList : itemsInUserList
     property list<var> unpinnedItems: invertPins ? itemsInUserList : itemsNotInUserList
+    onUnpinnedItemsChanged: if (unpinnedItems.length == 0) root.trayOverflowOpen = false;
 
     GridLayout {
         id: gridLayout
@@ -58,10 +59,14 @@ Item {
             StyledPopup {
                 hoverTarget: trayOverflowButton
                 active: root.trayOverflowOpen
+                popupBackgroundMargin: 300 // This should be plenty... makes sure tooltips don't get cutoff (easily)
                 
                 GridLayout {
+                    id: trayOverflowLayout
                     anchors.centerIn: parent
-                    columns: 4
+                    columns: Math.ceil(Math.sqrt(root.unpinnedItems.length))
+                    columnSpacing: 10
+                    rowSpacing: 10
 
                     Repeater {
                         model: root.unpinnedItems

.config/quickshell/ii/modules/bar/SysTrayItem.qml

@@ -1,7 +1,7 @@
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.common.functions
 import QtQuick
-import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
@@ -13,6 +13,7 @@ MouseArea {
     property var bar: root.QsWindow.window
     required property SystemTrayItem item
     property bool targetMenuOpen: false
+    hoverEnabled: true
 
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     implicitWidth: 20
@@ -69,4 +70,14 @@ MouseArea {
         }
     }
 
+    StyledToolTip {
+        content: {
+            let c = root.item.id
+            if (root.item.tooltipDescription.length > 0) c += " • " + root.item.tooltipDescription
+            return c;
+        }
+        extraVisibleCondition: root.containsMouse
+        alternativeVisibleCondition: extraVisibleCondition
+    }
+
 }