OSD: possible layout fix, reintroduce scaling

Modules/OSD/OSD.qml

@@ -123,6 +123,9 @@ Variants {
     sourceComponent: PanelWindow {
       id: panel
       screen: modelData
+      
+      // PanelWindow scaling
+      property real scaling: ScalingService.getScreenScale(screen)
 
       readonly property string location: (Settings.data.osd && Settings.data.osd.location) ? Settings.data.osd.location : "top_right"
       readonly property bool isTop: (location === "top") || (location.length >= 3 && location.substring(0, 3) === "top")
@@ -131,11 +134,12 @@ Variants {
       readonly property bool isRight: (location.indexOf("_right") >= 0) || (location === "right")
       readonly property bool isCentered: (location === "top" || location === "bottom")
       readonly property bool verticalMode: (location === "left" || location === "right")
-      readonly property int hWidth: Math.round(320 * root.scaling)
+      readonly property int hWidth: Math.round(320 * scaling)
-      readonly property int hHeight: Math.round(64 * root.scaling)
+      readonly property int hHeight: Math.round(64 * scaling)
+      readonly property int vHeight: Math.round(320 * scaling) // Vertical OSD height (matches horizontal width)
       // Ensure an even width to keep the vertical bar perfectly centered
       readonly property int barThickness: (function () {
-        const base = Math.max(6, Math.round(6 * root.scaling))
+        const base = Math.max(8, Math.round(8 * scaling))
         return (base % 2 === 0) ? base : base + 1
       })()
 
@@ -143,6 +147,15 @@ Variants {
         connectBrightnessMonitors()
       }
 
+      Connections {
+        target: ScalingService
+        function onScaleChanged(screenName, scale) {
+          if ((screen !== null) && (screenName === screen.name)) {
+            scaling = scale
+          }
+        }
+      }
+
       Component.onDestruction: {
         disconnectBrightnessMonitors()
       }
@@ -211,12 +224,12 @@ Variants {
         id: osdItem
 
         width: parent.width
-        height: panel.verticalMode ? panel.hWidth : Math.round(64 * root.scaling)
+        height: panel.verticalMode ? panel.vHeight : Math.round(64 * scaling)
-        radius: Style.radiusL * root.scaling
+        radius: Style.radiusL * scaling
         color: Color.mSurface
         border.color: Color.mOutline
         border.width: (function () {
-          const bw = Math.max(2, Math.round(Style.borderM * root.scaling))
+          const bw = Math.max(2, Math.round(Style.borderM * scaling))
           return (bw % 2 === 0) ? bw : bw + 1
         })()
         visible: false
@@ -282,7 +295,7 @@ Variants {
               NIcon {
                 icon: root.getIcon()
                 color: root.getIconColor()
-                pointSize: Style.fontSizeXL * root.scaling
+                pointSize: Style.fontSizeXL * scaling
                 Layout.alignment: Qt.AlignVCenter
 
                 Behavior on color {
@@ -328,7 +341,7 @@ Variants {
               NText {
                 text: root.getDisplayPercentage()
                 color: Color.mOnSurface
-                pointSize: Style.fontSizeS * root.scaling
+                pointSize: Style.fontSizeS * scaling
                 family: Settings.data.ui.fontFixed
                 Layout.alignment: Qt.AlignVCenter
                 horizontalAlignment: Text.AlignLeft
@@ -344,18 +357,18 @@ Variants {
           ColumnLayout {
             // Ensure inner padding respects the rounded corners; avoid clipping the icon/text
             property int vMargin: (function () {
-              const styleMargin = Math.round(Style.marginL * root.scaling)
+              const styleMargin = Math.round(Style.marginL * scaling)
               const cornerGuard = Math.round(osdItem.radius)
               return Math.max(styleMargin, cornerGuard)
             })()
-            property int vMarginTop: Math.max(Math.round(osdItem.radius), Math.round(Style.marginS * root.scaling))
+            property int vMarginTop: Math.max(Math.round(osdItem.radius), Math.round(Style.marginS * scaling))
-            property int balanceDelta: Math.round(Style.marginS * root.scaling)
+            property int balanceDelta: Math.round(Style.marginS * scaling)
             anchors.fill: parent
             anchors.topMargin: vMargin
             anchors.leftMargin: vMargin
             anchors.rightMargin: vMargin
             anchors.bottomMargin: vMargin
-            spacing: Math.round(Style.marginS * root.scaling)
+            spacing: Math.round(Style.marginS * scaling)
 
             // Percentage text at top
             Item {
@@ -365,7 +378,7 @@ Variants {
                 id: percentText
                 text: root.getDisplayPercentage()
                 color: Color.mOnSurface
-                pointSize: Style.fontSizeS * root.scaling
+                pointSize: Style.fontSizeS * scaling
                 family: Settings.data.ui.fontFixed
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
@@ -377,7 +390,7 @@ Variants {
             // Progress bar
             Item {
               Layout.fillWidth: true
-              Layout.fillHeight: true
+              Layout.fillHeight: true // Fill remaining space between text and icon
               Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
@@ -414,7 +427,7 @@ Variants {
             NIcon {
               icon: root.getIcon()
               color: root.getIconColor()
-              pointSize: Style.fontSizeXL * root.scaling
+              pointSize: Style.fontSizeXL * scaling
               Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
               Behavior on color {
                 ColorAnimation {