fix: VpnPopout and Vpn widget tooltip positions (#1623)

* fix(vpn-widget): correct tooltip positioning for bottom bar alignment

- Calculate tooltip Y position based on bar edge (bottom vs top)
- Position tooltip above bar when edge is bottom to prevent overflow
- Account for tooltip height when positioning on bottom edge
- Use proper screen reference for consistent positioning across displays

* fix(VpnPopout): use correct screen height for popup sizing

- Fix popup height calculation to use the assigned screen property
  instead of the global Screen object
- Prevents incorrect positioning when multiple screens are present
- Fallback to Screen.height if screen property is not set

* fix(widgets): close DankPopout when screen is removed

- Add Connections handler to monitor Quickshell.onScreensChanged
- Automatically close popout if its assigned screen no longer exists
- Prevent orphaned popouts when displays are disconnected

quickshell/Modules/DankBar/Popouts/VpnPopout.qml

@@ -17,7 +17,7 @@ DankPopout {
     property var triggerScreen: null
 
     popupWidth: 380
-    popupHeight: Math.min(Screen.height - 100, contentLoader.item ? contentLoader.item.implicitHeight : 320)
+    popupHeight: Math.min((screen ? screen.height : Screen.height) - 100, contentLoader.item ? contentLoader.item.implicitHeight : 320)
     triggerWidth: 70
     screen: triggerScreen
     shouldBeVisible: false

quickshell/Modules/DankBar/Widgets/Vpn.qml

@@ -115,9 +115,19 @@ BasePill {
                 const isLeft = root.axis?.edge === "left";
                 tooltipLoader.item.show(tooltipText, screenX + tooltipX, adjustedY, currentScreen, isLeft, !isLeft);
             } else {
-                const globalPos = mapToGlobal(width / 2, height);
-                const tooltipY = root.barThickness + root.barSpacing + Theme.spacingXS;
-                tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
+                const isBottom = root.axis?.edge === "bottom";
+                const globalPos = mapToGlobal(width / 2, 0);
+                const currentScreen = root.parentScreen || Screen;
+
+                let tooltipY;
+                if (isBottom) {
+                    const tooltipHeight = Theme.fontSizeSmall * 1.5 + Theme.spacingS * 2;
+                    tooltipY = currentScreen.height - root.barThickness - root.barSpacing - Theme.spacingXS - tooltipHeight;
+                } else {
+                    tooltipY = root.barThickness + root.barSpacing + Theme.spacingXS;
+                }
+
+                tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, currentScreen, false, false);
             }
         }
         onExited: {

quickshell/Widgets/DankPopout.qml

@@ -145,6 +145,25 @@ Item {
         shouldBeVisible ? close() : open();
     }
 
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!shouldBeVisible || !screen)
+                return;
+            const currentScreenName = screen.name;
+            let screenStillExists = false;
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName) {
+                    screenStillExists = true;
+                    break;
+                }
+            }
+            if (!screenStillExists) {
+                close();
+            }
+        }
+    }
+
     Timer {
         id: closeTimer
         interval: animationDuration