Widgets Sizing: reworked our sizing approach to prepare for different bar densities.

Widgets/NIconButton.qml

@@ -7,8 +7,7 @@ import qs.Services
 Rectangle {
   id: root
 
-  // Multiplier to control how large the button container is relative to Style.baseWidgetSize
-  property real sizeRatio: 1.0
+  property real baseSize: Style.baseWidgetSize
 
   property string icon
   property string tooltipText
@@ -29,8 +28,8 @@ Rectangle {
   signal rightClicked
   signal middleClicked
 
-  implicitWidth: Math.round(Style.baseWidgetSize * scaling * sizeRatio)
-  implicitHeight: Math.round(Style.baseWidgetSize * scaling * sizeRatio)
+  implicitWidth: Math.round(baseSize * scaling)
+  implicitHeight: Math.round(baseSize * scaling)
 
   opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
   color: root.enabled && root.hovering ? colorBgHover : colorBg
@@ -47,7 +46,7 @@ Rectangle {
 
   NIcon {
     icon: root.icon
-    font.pointSize: Math.max(1, root.width * 0.47)
+    font.pointSize: Math.max(1, root.width * 0.48)
     color: root.enabled && root.hovering ? colorFgHover : colorFg
     // Center horizontally
     x: (root.width - width) / 2

Widgets/NPill.qml

@@ -10,7 +10,6 @@ Item {
   property string text: ""
   property string suffix: ""
   property string tooltipText: ""
-  property real sizeRatio: 0.8
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
@@ -46,7 +45,6 @@ Item {
         text: root.text
         suffix: root.suffix
         tooltipText: root.tooltipText
-        sizeRatio: root.sizeRatio
         autoHide: root.autoHide
         forceOpen: root.forceOpen
         forceClose: root.forceClose
@@ -71,7 +69,6 @@ Item {
         text: root.text
         suffix: root.suffix
         tooltipText: root.tooltipText
-        sizeRatio: root.sizeRatio
         autoHide: root.autoHide
         forceOpen: root.forceOpen
         forceClose: root.forceClose

Widgets/NPillHorizontal.qml

@@ -10,7 +10,6 @@ Item {
   property string text: ""
   property string suffix: ""
   property string tooltipText: ""
-  property real sizeRatio: 0.8
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
@@ -34,19 +33,17 @@ Item {
   property bool showPill: false
   property bool shouldAnimateHide: false
 
-  // Exposed width logic
-  readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling)
-  readonly property int pillHeight: iconSize
-  readonly property int pillPaddingHorizontal: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
-  readonly property int pillOverlap: iconSize * 0.5
-  readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
+  readonly property int pillHeight: Math.round(Style.capsuleHeight * scaling)
+  readonly property int pillPaddingHorizontal: Math.round(Style.capsuleHeight * 0.2 * scaling)
+  readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling)
+  readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
 
-  width: iconSize + Math.max(0, pill.width - pillOverlap)
+  width: pillHeight + Math.max(0, pill.width - pillOverlap)
   height: pillHeight
 
   Rectangle {
     id: pill
-    width: revealed ? maxPillWidth : 1
+    width: revealed ? pillMaxWidth : 1
     height: pillHeight
 
     x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right
@@ -76,7 +73,7 @@ Item {
       }
       text: root.text + root.suffix
       font.family: Settings.data.ui.fontFixed
-      font.pointSize: Style.fontSizeXS * scaling
+      font.pointSize: Math.max(1, root.pillHeight * 0.33)
       font.weight: Style.fontWeightBold
       color: forceOpen ? Color.mOnSurface : Color.mPrimary
       visible: revealed
@@ -100,8 +97,8 @@ Item {
 
   Rectangle {
     id: iconCircle
-    width: iconSize
-    height: iconSize
+    width: pillHeight
+    height: pillHeight
     radius: width * 0.5
     color: hovered ? Color.mTertiary : Color.mSurfaceVariant
     anchors.verticalCenter: parent.verticalCenter
@@ -117,7 +114,7 @@ Item {
 
     NIcon {
       icon: root.icon
-      font.pointSize: Style.fontSizeM * scaling
+      font.pointSize: Math.max(1, pillHeight * 0.5)
       color: hovered ? Color.mOnTertiary : Color.mOnSurface
       // Center horizontally
       x: (iconCircle.width - width) / 2
@@ -133,7 +130,7 @@ Item {
       target: pill
       property: "width"
       from: 1
-      to: maxPillWidth
+      to: pillMaxWidth
       duration: Style.animationNormal
       easing.type: Easing.OutCubic
     }
@@ -173,7 +170,7 @@ Item {
     NumberAnimation {
       target: pill
       property: "width"
-      from: maxPillWidth
+      from: pillMaxWidth
       to: 1
       duration: Style.animationNormal
       easing.type: Easing.InCubic

Widgets/NPillVertical.qml

@@ -10,7 +10,6 @@ Item {
   property string text: ""
   property string suffix: ""
   property string tooltipText: ""
-  property real sizeRatio: 0.8
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
@@ -43,7 +42,7 @@ Item {
   property bool shouldAnimateHide: false
 
   // Sizing logic for vertical bars
-  readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling)
+  readonly property int iconSize: Math.round(Style.capsuleHeight * scaling)
   readonly property int pillHeight: iconSize
   readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
   readonly property int pillOverlap: iconSize * 0.5

Widgets/NWidgetLoader.qml

@@ -49,7 +49,7 @@ Item {
         item.onLoaded()
       }
 
-      //Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name)
+      Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name)
     }
   }