misc: fix some various scaling issues with fonts

fixes #1268

quickshell/Modals/Settings/SettingsSidebar.qml

@@ -750,7 +750,7 @@ Rectangle {
                     Rectangle {
                         id: categoryRow
                         width: parent.width
-                        height: 40
+                        height: Math.max(Theme.iconSize, Theme.fontSizeMedium) + Theme.spacingS * 2
                         radius: Theme.cornerRadius
                         visible: categoryDelegate.modelData.separator !== true
 
@@ -847,7 +847,7 @@ Rectangle {
                                 readonly property bool isHighlighted: root.keyboardHighlightIndex === modelData.tabIndex
 
                                 width: childrenColumn.width
-                                height: 36
+                                height: Math.max(Theme.iconSize - 4, Theme.fontSizeSmall + 1) + Theme.spacingS * 2
                                 radius: Theme.cornerRadius
                                 visible: root.isItemVisible(modelData)
                                 color: {

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -314,25 +314,39 @@ DankPopout {
                     height: Theme.spacingXS
                 }
 
-                StackLayout {
+                Item {
                     id: pages
                     width: parent.width
+                    height: implicitHeight
                     implicitHeight: {
-                        if (currentIndex === 0)
+                        if (root.currentTabIndex === 0)
                             return overviewLoader.item?.implicitHeight ?? 410;
-                        if (currentIndex === 1)
+                        if (root.currentTabIndex === 1)
                             return mediaLoader.item?.implicitHeight ?? 410;
-                        if (currentIndex === 2)
+                        if (root.currentTabIndex === 2)
                             return wallpaperLoader.item?.implicitHeight ?? 410;
-                        if (SettingsData.weatherEnabled && currentIndex === 3)
+                        if (SettingsData.weatherEnabled && root.currentTabIndex === 3)
                             return weatherLoader.item?.implicitHeight ?? 410;
                         return 410;
                     }
-                    currentIndex: root.currentTabIndex
+
+                    readonly property var currentItem: {
+                        if (root.currentTabIndex === 0)
+                            return overviewLoader.item;
+                        if (root.currentTabIndex === 1)
+                            return mediaLoader.item;
+                        if (root.currentTabIndex === 2)
+                            return wallpaperLoader.item;
+                        if (root.currentTabIndex === 3)
+                            return weatherLoader.item;
+                        return null;
+                    }
 
                     Loader {
                         id: overviewLoader
+                        anchors.fill: parent
                         active: root.currentTabIndex === 0
+                        visible: active
                         sourceComponent: Component {
                             OverviewTab {
                                 onCloseDash: root.dashVisible = false
@@ -350,7 +364,9 @@ DankPopout {
 
                     Loader {
                         id: mediaLoader
+                        anchors.fill: parent
                         active: root.currentTabIndex === 1
+                        visible: active
                         sourceComponent: Component {
                             MediaPlayerTab {
                                 targetScreen: root.screen
@@ -379,7 +395,9 @@ DankPopout {
 
                     Loader {
                         id: wallpaperLoader
+                        anchors.fill: parent
                         active: root.currentTabIndex === 2
+                        visible: active
                         sourceComponent: Component {
                             WallpaperTab {
                                 active: true
@@ -393,7 +411,9 @@ DankPopout {
 
                     Loader {
                         id: weatherLoader
+                        anchors.fill: parent
                         active: SettingsData.weatherEnabled && root.currentTabIndex === 3
+                        visible: active
                         sourceComponent: Component {
                             WeatherTab {}
                         }

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -129,7 +129,7 @@ Item {
     }
 
     implicitWidth: 700
-    implicitHeight: 410
+    implicitHeight: playerContent.height + playerContent.anchors.topMargin * 2
 
     Connections {
         target: activePlayer
@@ -327,6 +327,7 @@ Item {
         clip: false
         visible: !_noneAvailable && (!showNoPlayerNow)
         ColumnLayout {
+            id: playerContent
             width: 484
             height: 370
             spacing: Theme.spacingXS

quickshell/Modules/DankDash/WeatherTab.qml

@@ -12,7 +12,7 @@ Item {
     LayoutMirroring.childrenInherit: true
 
     implicitWidth: 700
-    implicitHeight: 410
+    implicitHeight: root.available ? mainColumn.implicitHeight : unavailableColumn.implicitHeight + Theme.spacingXL * 2
     property bool syncing: false
 
     function syncFrom(type) {
@@ -52,6 +52,7 @@ Item {
     property bool available: WeatherService.weather.available
 
     Column {
+        id: unavailableColumn
         anchors.centerIn: parent
         spacing: Theme.spacingL
         visible: !root.available
@@ -141,6 +142,7 @@ Item {
     }
 
     Column {
+        id: mainColumn
         anchors.fill: parent
         visible: root.available
         spacing: Theme.spacingXS
@@ -164,7 +166,7 @@ Item {
                     anchors.horizontalCenter: parent.horizontalCenter
                     // anchors.verticalCenter: parent.verticalCenter
                     width: weatherIcon.width + tempColumn.width + sunriseColumn.width + Theme.spacingM * 2
-                    height: 70
+                    height: Math.max(weatherIcon.height, tempColumn.height, sunriseColumn.height)
 
                     DankIcon {
                         id: weatherIcon
@@ -325,7 +327,7 @@ Item {
                 Item {
                     id: dateStepper
                     anchors.horizontalCenter: parent.horizontalCenter
-                    height: 60
+                    height: dateStepperInner.height + Theme.spacingM * 2
                     width: dateStepperInner.width
 
                     property var currentDate: new Date()
@@ -354,10 +356,11 @@ Item {
 
                     Item {
                         id: dateStepperInner
-                        anchors.fill: parent
+                        anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
                         readonly property var space: Theme.spacingXS
                         width: yearStepper.width + monthStepper.width + dayStepper.width + hourStepper.width + minuteStepper.width + (suffix.visible ? suffix.width : 0) + 10.5 * space + 2 * dateStepperInnerPadding.width
+                        height: Math.max(yearStepper.height, monthStepper.height, dayStepper.height, hourStepper.height, minuteStepper.height)
 
                         Item {
                             id: dateStepperInnerPadding
@@ -444,20 +447,15 @@ Item {
                                 text: ":"
                             }
                         }
-                        Rectangle {
+                        StyledText {
                             id: suffix
                             visible: !SettingsData.use24HourClock
-                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.verticalCenter: minuteStepper.verticalCenter
                             anchors.left: minuteStepper.right
                             anchors.leftMargin: 2 * parent.space
-                            StyledText {
+                            isMonospace: true
-                                isMonospace: true
+                            text: dateStepper.splitDate[5] ?? ""
-                                anchors.horizontalCenter: parent.horizontalCenter
+                            font.pixelSize: Theme.fontSizeSmall
-                                text: dateStepper.splitDate[5] ?? ""
-                                font.pixelSize: Theme.fontSizeSmall
-                                x: -Theme.fontSizeSmall / 2
-                                y: -Theme.fontSizeSmall / 2
-                            }
                         }
                         DankActionButton {
                             id: dateResetButton
@@ -898,7 +896,7 @@ Item {
 
         Row {
             width: parent.width
-            height: 32
+            height: Math.max(hourlyHeader.height, denseButton.height) + Theme.spacingS
             spacing: Theme.spacingS
 
             StyledText {
@@ -928,7 +926,7 @@ Item {
 
         Item {
             width: parent.width
-            height: 100 + Theme.spacingXS
+            height: (hourlyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS
 
             Loader {
                 id: hourlyLoader
@@ -962,7 +960,7 @@ Item {
                     contentHeight: cardHeight
                     contentWidth: cardWidth
 
-                    property var cardHeight: 100
+                    property var cardHeight: Theme.fontSizeLarge * 6
                     property var cardWidth: ((hourlyList.width + hourlyList.spacing) / hourlyList.visibleCount) - hourlyList.spacing
                     property int initialIndex: (new Date()).getHours()
                     property bool dense: !SessionData.weatherHourlyDetailed
@@ -1038,7 +1036,7 @@ Item {
 
         Row {
             width: parent.width
-            height: 32
+            height: dailyHeader.height + Theme.spacingS
             spacing: Theme.spacingS
 
             StyledText {
@@ -1060,7 +1058,7 @@ Item {
 
         Item {
             width: parent.width
-            height: 100 + Theme.spacingXS
+            height: (dailyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS
 
             Loader {
                 id: dailyLoader
@@ -1094,7 +1092,7 @@ Item {
                     contentHeight: cardHeight
                     contentWidth: cardWidth
 
-                    property var cardHeight: 100
+                    property var cardHeight: Theme.fontSizeLarge * 6
                     property var cardWidth: ((dailyList.width + dailyList.spacing) / dailyList.visibleCount) - dailyList.spacing
                     property int initialIndex: 0
                     property bool dense: false

quickshell/Modules/Settings/WidgetsTabSection.qml

@@ -373,81 +373,42 @@ Column {
                             }
                         }
 
+                        DankActionButton {
+                            id: musicMenuButton
+                            visible: modelData.id === "music"
+                            buttonSize: 32
+                            iconName: "more_vert"
+                            iconSize: 18
+                            iconColor: Theme.outline
+                            onClicked: {
+                                musicContextMenu.widgetData = modelData;
+                                musicContextMenu.sectionId = root.sectionId;
+                                musicContextMenu.widgetIndex = index;
+
+                                var buttonPos = musicMenuButton.mapToItem(root, 0, 0);
+                                var popupWidth = musicContextMenu.width;
+                                var popupHeight = musicContextMenu.height;
+
+                                var xPos = buttonPos.x - popupWidth - Theme.spacingS;
+                                if (xPos < 0)
+                                    xPos = buttonPos.x + musicMenuButton.width + Theme.spacingS;
+
+                                var yPos = buttonPos.y - popupHeight / 2 + musicMenuButton.height / 2;
+                                if (yPos < 0) {
+                                    yPos = Theme.spacingS;
+                                } else if (yPos + popupHeight > root.height) {
+                                    yPos = root.height - popupHeight - Theme.spacingS;
+                                }
+
+                                musicContextMenu.x = xPos;
+                                musicContextMenu.y = yPos;
+                                musicContextMenu.open();
+                            }
+                        }
+
                         Row {
                             spacing: Theme.spacingXS
-                            visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name"
+                            visible: modelData.id === "clock" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name"
-
-                            DankActionButton {
-                                id: smallSizeButton
-                                buttonSize: 28
-                                visible: modelData.id === "music"
-                                iconName: "photo_size_select_small"
-                                iconSize: 16
-                                iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 0 ? Theme.primary : Theme.outline
-                                onClicked: {
-                                    root.compactModeChanged("music", 0);
-                                }
-                                onEntered: {
-                                    sharedTooltip.show("Small", smallSizeButton, 0, 0, "bottom");
-                                }
-                                onExited: {
-                                    sharedTooltip.hide();
-                                }
-                            }
-
-                            DankActionButton {
-                                id: mediumSizeButton
-                                buttonSize: 28
-                                visible: modelData.id === "music"
-                                iconName: "photo_size_select_actual"
-                                iconSize: 16
-                                iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 1 ? Theme.primary : Theme.outline
-                                onClicked: {
-                                    root.compactModeChanged("music", 1);
-                                }
-                                onEntered: {
-                                    sharedTooltip.show("Medium", mediumSizeButton, 0, 0, "bottom");
-                                }
-                                onExited: {
-                                    sharedTooltip.hide();
-                                }
-                            }
-
-                            DankActionButton {
-                                id: largeSizeButton
-                                buttonSize: 28
-                                visible: modelData.id === "music"
-                                iconName: "photo_size_select_large"
-                                iconSize: 16
-                                iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 2 ? Theme.primary : Theme.outline
-                                onClicked: {
-                                    root.compactModeChanged("music", 2);
-                                }
-                                onEntered: {
-                                    sharedTooltip.show("Large", largeSizeButton, 0, 0, "bottom");
-                                }
-                                onExited: {
-                                    sharedTooltip.hide();
-                                }
-                            }
-
-                            DankActionButton {
-                                id: largerSizeButton
-                                buttonSize: 28
-                                visible: modelData.id === "music"
-                                iconName: "fit_screen"
-                                iconSize: 16
-                                iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 3 ? Theme.primary : Theme.outline
-                                onClicked: {
-                                    root.compactModeChanged("music", 3);
-                                }
-                                onEntered: {
-                                    sharedTooltip.show("Largest", largerSizeButton, 0, 0, "bottom");
-                                }
-                                onExited: {
-                                    sharedTooltip.hide();
-                                }
-                            }
 
                             DankActionButton {
                                 id: compactModeButton
@@ -1308,4 +1269,119 @@ Column {
             }
         }
     }
+
+    Popup {
+        id: musicContextMenu
+
+        property var widgetData: null
+        property string sectionId: ""
+        property int widgetIndex: -1
+
+        width: 180
+        height: musicMenuColumn.implicitHeight + Theme.spacingS * 2
+        padding: 0
+        modal: true
+        focus: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+        background: Rectangle {
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            radius: Theme.cornerRadius
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+            border.width: 0
+        }
+
+        contentItem: Item {
+            Column {
+                id: musicMenuColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingS
+                spacing: 2
+
+                Repeater {
+                    model: [
+                        {
+                            icon: "photo_size_select_small",
+                            label: I18n.tr("Small"),
+                            sizeValue: 0
+                        },
+                        {
+                            icon: "photo_size_select_actual",
+                            label: I18n.tr("Medium"),
+                            sizeValue: 1
+                        },
+                        {
+                            icon: "photo_size_select_large",
+                            label: I18n.tr("Large"),
+                            sizeValue: 2
+                        },
+                        {
+                            icon: "fit_screen",
+                            label: I18n.tr("Largest"),
+                            sizeValue: 3
+                        }
+                    ]
+
+                    delegate: Rectangle {
+                        required property var modelData
+                        required property int index
+
+                        function isSelected() {
+                            var wd = musicContextMenu.widgetData;
+                            var currentSize = wd?.mediaSize ?? SettingsData.mediaSize;
+                            return currentSize === modelData.sizeValue;
+                        }
+
+                        width: musicMenuColumn.width
+                        height: Math.max(18, Theme.fontSizeSmall) + Theme.spacingM * 2
+                        radius: Theme.cornerRadius
+                        color: musicOptionArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingS
+
+                            DankIcon {
+                                name: modelData.icon
+                                size: 18
+                                color: isSelected() ? Theme.primary : Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: modelData.label
+                                font.pixelSize: Theme.fontSizeSmall
+                                font.weight: isSelected() ? Font.Medium : Font.Normal
+                                color: isSelected() ? Theme.primary : Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+                        }
+
+                        DankIcon {
+                            anchors.right: parent.right
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.verticalCenter: parent.verticalCenter
+                            name: "check"
+                            size: 16
+                            color: Theme.primary
+                            visible: isSelected()
+                        }
+
+                        MouseArea {
+                            id: musicOptionArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.compactModeChanged("music", modelData.sizeValue);
+                                musicContextMenu.close();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }