scalable topbar

Common/SettingsData.qml

@@ -84,6 +84,7 @@ Singleton {
     property bool notificationOverlayEnabled: false
     property bool topBarAutoHide: false
     property real topBarSpacing: 4
+    property real topBarInnerPadding: 8
     property bool topBarSquareCorners: false
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
@@ -273,6 +274,7 @@ Singleton {
                 notificationTimeoutCritical = settings.notificationTimeoutCritical
                         !== undefined ? settings.notificationTimeoutCritical : 0
                 topBarSpacing = settings.topBarSpacing !== undefined ? settings.topBarSpacing : 4
+                topBarInnerPadding = settings.topBarInnerPadding !== undefined ? settings.topBarInnerPadding : 8
                 topBarSquareCorners = settings.topBarSquareCorners
                         !== undefined ? settings.topBarSquareCorners : false
                 applyStoredTheme()
@@ -355,6 +357,7 @@ Singleton {
                                                 "notificationOverlayEnabled": notificationOverlayEnabled,
                                                 "topBarAutoHide": topBarAutoHide,
                                                 "topBarSpacing": topBarSpacing,
+                                                "topBarInnerPadding": topBarInnerPadding,
                                                 "topBarSquareCorners": topBarSquareCorners,
                                                 "notificationTimeoutLow": notificationTimeoutLow,
                                                 "notificationTimeoutNormal": notificationTimeoutNormal,
@@ -875,6 +878,11 @@ Singleton {
         saveSettings()
     }
 
+    function setTopBarInnerPadding(padding) {
+        topBarInnerPadding = padding
+        saveSettings()
+    }
+
     function setTopBarSquareCorners(enabled) {
         topBarSquareCorners = enabled
         saveSettings()

Modules/Settings/PersonalizationTab.qml

@@ -896,71 +896,6 @@ Item {
                 }
             }
 
-            // Corner Radius
-            StyledRect {
-                width: parent.width
-                height: cornerRadiusSection.implicitHeight + Theme.spacingL * 2
-                radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                               Theme.surfaceVariant.b, 0.3)
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                      Theme.outline.b, 0.2)
-                border.width: 1
-
-                Column {
-                    id: cornerRadiusSection
-
-                    anchors.fill: parent
-                    anchors.margins: Theme.spacingL
-                    spacing: Theme.spacingM
-
-                    Row {
-                        width: parent.width
-                        spacing: Theme.spacingM
-
-                        DankIcon {
-                            name: "rounded_corner"
-                            size: Theme.iconSize
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: "Corner Radius"
-                            font.pixelSize: Theme.fontSizeLarge
-                            font.weight: Font.Medium
-                            color: Theme.surfaceText
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    Column {
-                        width: parent.width
-                        spacing: Theme.spacingS
-
-                        StyledText {
-                            text: "Bar & Widget Corner Roundness"
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                            font.weight: Font.Medium
-                        }
-
-                        DankSlider {
-                            width: parent.width
-                            height: 24
-                            value: SettingsData.cornerRadius
-                            minimum: 0
-                            maximum: 32
-                            unit: ""
-                            showValue: true
-                            onSliderValueChanged: newValue => {
-                                                      SettingsData.setCornerRadius(
-                                                          newValue)
-                                                  }
-                        }
-                    }
-                }
-            }
         }
     }
 

Modules/Settings/TopBarTab.qml

@@ -618,10 +618,62 @@ Item {
                         }
                     }
 
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        StyledText {
+                            text: "Vertical Padding (0 = minimal height)"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        DankSlider {
+                            width: parent.width
+                            height: 24
+                            value: SettingsData.topBarInnerPadding
+                            minimum: 0
+                            maximum: 24
+                            unit: ""
+                            showValue: true
+                            onSliderValueChanged: newValue => {
+                                                      SettingsData.setTopBarInnerPadding(
+                                                          newValue)
+                                                  }
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        StyledText {
+                            text: "Corner Radius (0 = square corners)"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        DankSlider {
+                            width: parent.width
+                            height: 24
+                            value: SettingsData.cornerRadius
+                            minimum: 0
+                            maximum: 32
+                            unit: ""
+                            showValue: true
+                            onSliderValueChanged: newValue => {
+                                                      SettingsData.setCornerRadius(
+                                                          newValue)
+                                                  }
+                        }
+                    }
+
                     DankToggle {
                         width: parent.width
                         text: "Square Corners"
-                        description: "Disable corner radius for the top bar (always square corners)"
+                        description: "Removes rounded corners from bar container."
                         checked: SettingsData.topBarSquareCorners
                         onToggled: checked => {
                                        SettingsData.setTopBarSquareCorners(

Modules/TopBar/Battery.qml

@@ -11,11 +11,13 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
 
     signal toggleBatteryPopup
 
     width: BatteryService.batteryAvailable ? 70 : 40
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = batteryArea.containsMouse
@@ -132,7 +134,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             toggleBatteryPopup()

Modules/TopBar/Clock.qml

@@ -11,11 +11,13 @@ Rectangle {
     property string section: "center"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     signal clockClicked
 
     width: clockRow.implicitWidth + Theme.spacingS * 2
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
@@ -79,7 +81,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             root.clockClicked()

Modules/TopBar/ControlCenterButton.qml

@@ -15,12 +15,14 @@ Rectangle {
     property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
     property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
     property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
+    property real widgetHeight: 30
+    property real barHeight: 48
 
     signal clicked
     signal iconClicked(string tab)
 
     width: controlIndicators.implicitWidth + Theme.spacingS * 2
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = controlCenterArea.containsMouse
@@ -143,7 +145,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
 

Modules/TopBar/CpuMonitor.qml

@@ -13,9 +13,11 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     width: 55
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             DgopService.setSortBy("cpu")

Modules/TopBar/CpuTemperature.qml

@@ -13,9 +13,11 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     width: 55
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = cpuTempArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             DgopService.setSortBy("cpu")

Modules/TopBar/FocusedApp.qml

@@ -10,6 +10,7 @@ Rectangle {
 
     property bool compactMode: SettingsData.focusedWindowCompactMode
     property int availableWidth: 400
+    property real widgetHeight: 30
     readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
     readonly property int maxNormalWidth: 456
     readonly property int maxCompactWidth: 288
@@ -18,7 +19,7 @@ Rectangle {
     width: compactMode ? Math.min(baseWidth,
                                   maxCompactWidth) : Math.min(baseWidth,
                                                               maxNormalWidth)
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         if (!activeWindow || !activeWindow.title)

Modules/TopBar/GpuTemperature.qml

@@ -14,6 +14,8 @@ Rectangle {
     property var popupTarget: null
     property var parentScreen: null
     property var widgetData: null
+    property real barHeight: 48
+    property real widgetHeight: 30
     property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex
                                     !== undefined) ? widgetData.selectedGpuIndex : 0
 
@@ -29,7 +31,7 @@ Rectangle {
     }
 
     width: 55
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = gpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -84,7 +86,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             DgopService.setSortBy("cpu")

Modules/TopBar/IdleInhibitor.qml

@@ -11,9 +11,10 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real widgetHeight: 30
 
     width: 40
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : (SessionService.idleInhibited ? Theme.primaryHover : Theme.secondaryHover)

Modules/TopBar/LauncherButton.qml

@@ -10,11 +10,13 @@ Item {
     property string section: "left"
     property var popupTarget: null
     property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
 
     signal clicked
 
     width: 40
-    height: 30
+    height: widgetHeight
 
     MouseArea {
         id: launcherArea
@@ -30,7 +32,7 @@ Item {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             root.clicked()

Modules/TopBar/Media.qml

@@ -29,10 +29,12 @@ Rectangle {
     property string section: "center"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     signal clicked
 
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = Theme.surfaceTextHover
@@ -210,7 +212,7 @@ Rectangle {
                             var relativeX = globalPos.x - screenX
                             root.popupTarget.setTriggerPosition(
                                         relativeX,
-                                        Theme.barHeight + Theme.spacingXS,
+                                        barHeight + Theme.spacingXS,
                                         root.width, root.section, currentScreen)
                         }
                         root.clicked()

Modules/TopBar/NotificationCenterButton.qml

@@ -10,11 +10,13 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real widgetHeight: 30
+    property real barHeight: 48
 
     signal clicked
 
     width: 40
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = notificationArea.containsMouse
@@ -56,7 +58,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             root.clicked()

Modules/TopBar/PrivacyIndicator.qml

@@ -10,13 +10,14 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real widgetHeight: 30
 
     readonly property bool hasActivePrivacy: PrivacyService.anyPrivacyActive
     readonly property int activeCount: PrivacyService.microphoneActive + PrivacyService.cameraActive
                                        + PrivacyService.screensharingActive
 
     width: hasActivePrivacy ? (activeCount > 1 ? 80 : 60) : 0
-    height: hasActivePrivacy ? 30 : 0
+    height: hasActivePrivacy ? widgetHeight : 0
     radius: Theme.cornerRadius
     visible: hasActivePrivacy
     opacity: hasActivePrivacy ? 1 : 0

Modules/TopBar/RamMonitor.qml

@@ -13,9 +13,11 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     width: 55
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             DgopService.setSortBy("memory")

Modules/TopBar/RunningApps.qml

@@ -14,6 +14,7 @@ Rectangle {
     property var parentScreen
     property var hoveredItem: null
     property var topBar: null
+    property real widgetHeight: 30
     // The visual root for this window
     property Item windowRoot: (Window.window ? Window.window.contentItem : null)
     readonly property var sortedToplevels: CompositorService.sortedToplevels
@@ -30,7 +31,7 @@ Rectangle {
     }
 
     width: calculatedWidth
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     visible: windowCount > 0
     clip: false

Modules/TopBar/SystemTrayBar.qml

@@ -9,13 +9,14 @@ Rectangle {
 
     property var parentWindow: null
     property var parentScreen: null
+    property real widgetHeight: 30
 
     readonly property int calculatedWidth: SystemTray.items.values.length
                                            > 0 ? SystemTray.items.values.length
                                                  * 24 + Theme.spacingS * 2 : 0
 
     width: calculatedWidth
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         if (SystemTray.items.values.length === 0)

Modules/TopBar/TopBar.qml

@@ -23,9 +23,11 @@ PanelWindow {
     readonly property int notificationCount: NotificationService.notifications.length
     property bool autoHide: SettingsData.topBarAutoHide
     property bool reveal: !autoHide || topBarMouseArea.containsMouse
+    readonly property real effectiveBarHeight: Math.max(root.widgetHeight + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding))
+    readonly property real widgetHeight: Math.max(20, 26 + SettingsData.topBarInnerPadding * 0.6)
 
     screen: modelData
-    implicitHeight: Theme.barHeight - 4 + SettingsData.topBarSpacing
+    implicitHeight: effectiveBarHeight + SettingsData.topBarSpacing
     color: "transparent"
     Component.onCompleted: {
         let fonts = Qt.fontFamilies()
@@ -153,7 +155,7 @@ PanelWindow {
         right: true
     }
 
-    exclusiveZone: autoHide ? -1 : Theme.barHeight - 4 + SettingsData.topBarSpacing
+    exclusiveZone: autoHide ? -1 : root.effectiveBarHeight + SettingsData.topBarSpacing - 2
 
     mask: Region {
         item: topBarMouseArea
@@ -161,7 +163,7 @@ PanelWindow {
 
     MouseArea {
         id: topBarMouseArea
-        height: root.reveal ? Theme.barHeight - 4 + SettingsData.topBarSpacing : 4
+        height: root.reveal ? effectiveBarHeight + SettingsData.topBarSpacing : 4
         anchors {
             top: parent.top
             left: parent.left
@@ -182,7 +184,7 @@ PanelWindow {
 
             transform: Translate {
                 id: topBarSlide
-                y: root.reveal ? 0 : -(Theme.barHeight - 8)
+                y: root.reveal ? 0 : -(effectiveBarHeight - 4)
 
                 Behavior on y {
                     NumberAnimation {
@@ -386,10 +388,10 @@ PanelWindow {
                     }
 
                     anchors.fill: parent
-                    anchors.leftMargin: Theme.spacingM
+                    anchors.leftMargin: Math.max(Theme.spacingXS, SettingsData.topBarInnerPadding * 0.8)
-                    anchors.rightMargin: Theme.spacingM
+                    anchors.rightMargin: Math.max(Theme.spacingXS, SettingsData.topBarInnerPadding * 0.8)
-                    anchors.topMargin: Theme.spacingXS
+                    anchors.topMargin: SettingsData.topBarInnerPadding / 2
-                    anchors.bottomMargin: Theme.spacingXS
+                    anchors.bottomMargin: SettingsData.topBarInnerPadding / 2
                     clip: true
 
                     Row {
@@ -604,7 +606,7 @@ PanelWindow {
 
                         Rectangle {
                             width: 40
-                            height: 30
+                            height: root.widgetHeight
                             radius: Theme.cornerRadius
                             color: {
                                 const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
@@ -646,6 +648,8 @@ PanelWindow {
 
                         LauncherButton {
                             isActive: false
+                            widgetHeight: root.widgetHeight
+                            barHeight: root.effectiveBarHeight
                             section: {
                                 if (parent && parent.parent) {
                                     if (parent.parent === leftSection)
@@ -672,6 +676,7 @@ PanelWindow {
 
                         WorkspaceSwitcher {
                             screenName: root.screenName
+                            widgetHeight: root.widgetHeight
                         }
                     }
 
@@ -680,6 +685,7 @@ PanelWindow {
 
                         FocusedApp {
                             availableWidth: topBarContent.leftToMediaGap
+                            widgetHeight: root.widgetHeight
                         }
                     }
 
@@ -687,6 +693,7 @@ PanelWindow {
                         id: runningAppsComponent
 
                         RunningApps {
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -706,6 +713,8 @@ PanelWindow {
 
                         Clock {
                             compactMode: topBarContent.overlapping
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -736,6 +745,8 @@ PanelWindow {
                         Media {
                             compactMode: topBarContent.spacingTight
                                          || topBarContent.overlapping
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -764,6 +775,8 @@ PanelWindow {
                         id: weatherComponent
 
                         Weather {
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -794,6 +807,7 @@ PanelWindow {
                         SystemTrayBar {
                             parentWindow: root
                             parentScreen: root.screen
+                            widgetHeight: root.widgetHeight
                         }
                     }
 
@@ -801,6 +815,7 @@ PanelWindow {
                         id: privacyIndicatorComponent
 
                         PrivacyIndicator {
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -818,6 +833,8 @@ PanelWindow {
                         id: cpuUsageComponent
 
                         CpuMonitor {
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -844,6 +861,8 @@ PanelWindow {
                         id: memUsageComponent
 
                         RamMonitor {
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -870,6 +889,8 @@ PanelWindow {
                         id: cpuTempComponent
 
                         CpuTemperature {
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -896,6 +917,8 @@ PanelWindow {
                         id: gpuTempComponent
 
                         GpuTemperature {
+                            barHeight: root.effectiveBarHeight
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -925,6 +948,8 @@ PanelWindow {
                         NotificationCenterButton {
                             hasUnread: root.notificationCount > 0
                             isActive: notificationCenterLoader.item ? notificationCenterLoader.item.shouldBeVisible : false
+                            widgetHeight: root.widgetHeight
+                            barHeight: root.effectiveBarHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -953,6 +978,8 @@ PanelWindow {
 
                         Battery {
                             batteryPopupVisible: batteryPopoutLoader.item ? batteryPopoutLoader.item.shouldBeVisible : false
+                            widgetHeight: root.widgetHeight
+                            barHeight: root.effectiveBarHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -981,6 +1008,8 @@ PanelWindow {
 
                         ControlCenterButton {
                             isActive: controlCenterLoader.item ? controlCenterLoader.item.shouldBeVisible : false
+                            widgetHeight: root.widgetHeight
+                            barHeight: root.effectiveBarHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -1023,6 +1052,7 @@ PanelWindow {
                         id: idleInhibitorComponent
 
                         IdleInhibitor {
+                            widgetHeight: root.widgetHeight
                             section: {
                                 if (parent && parent.parent === leftSection)
                                     return "left"
@@ -1041,7 +1071,7 @@ PanelWindow {
 
                         Item {
                             width: parent.spacerSize || 20
-                            height: 30
+                            height: root.widgetHeight
 
                             Rectangle {
                                 anchors.fill: parent
@@ -1068,7 +1098,7 @@ PanelWindow {
 
                         Rectangle {
                             width: 1
-                            height: 20
+                            height: root.widgetHeight * 0.67
                             color: Theme.outline
                             opacity: 0.3
                         }

Modules/TopBar/Weather.qml

@@ -9,13 +9,15 @@ Rectangle {
     property string section: "center"
     property var popupTarget: null
     property var parentScreen: null
+    property real barHeight: 48
+    property real widgetHeight: 30
 
     signal clicked
 
     visible: SettingsData.weatherEnabled
     width: visible ? Math.min(100,
                               weatherRow.implicitWidth + Theme.spacingS * 2) : 0
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
@@ -67,7 +69,7 @@ Rectangle {
                 var screenX = currentScreen.x || 0
                 var relativeX = globalPos.x - screenX
                 popupTarget.setTriggerPosition(
-                            relativeX, Theme.barHeight + Theme.spacingXS,
+                            relativeX, barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
             root.clicked()

Modules/TopBar/WorkspaceSwitcher.qml

@@ -10,6 +10,7 @@ Rectangle {
     id: root
 
     property string screenName: ""
+    property real widgetHeight: 30
     property int currentWorkspace: {
         if (CompositorService.isNiri) {
             return getNiriActiveWorkspace()
@@ -78,10 +79,10 @@ Rectangle {
 
     width: SettingsData.showWorkspacePadding ? Math.max(
                                                    120,
-                                                   workspaceRow.implicitWidth + Theme.spacingL
+                                                   workspaceRow.implicitWidth + SettingsData.topBarInnerPadding
                                                    * 2) : workspaceRow.implicitWidth
-                                               + Theme.spacingL * 2
+                                               + SettingsData.topBarInnerPadding * 2
-    height: 30
+    height: widgetHeight
     radius: Theme.cornerRadius
     color: {
         const baseColor = Theme.surfaceTextHover
@@ -192,9 +193,8 @@ Rectangle {
                                                                    workspaceData.name) : null
                 property bool hasIcon: iconData !== null
 
-                width: isActive ? Theme.spacingXL + Theme.spacingM : Theme.spacingL
+                width: isActive ? widgetHeight * 1.2 + Theme.spacingXS : widgetHeight * 0.8
-                                  + Theme.spacingXS
+                height: widgetHeight * 0.6
-                height: Theme.spacingL
                 radius: height / 2
                 color: isActive ? Theme.primary : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha