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

Modules/SettingsPanel/Bar/BarSectionEditor.qml

@@ -14,6 +14,9 @@ NBox {
   property var widgetModel: []
   property var availableWidgets: []
 
+
+  readonly property real miniButtonSize: Style.baseWidgetSize * 0.65
+
   signal addWidget(string widgetId, string section)
   signal removeWidget(string section, int index)
   signal reorderWidget(string section, int fromIndex, int toIndex)
@@ -178,7 +181,7 @@ NBox {
                   active: BarWidgetRegistry.widgetHasUserSettings(modelData.id)
                   sourceComponent: NIconButton {
                     icon: "settings"
-                    sizeRatio: 0.6
+                    baseSize: miniButtonSize
                     colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight)
                     colorBg: Color.mOnSurface
                     colorFg: Color.mOnPrimary
@@ -218,7 +221,7 @@ NBox {
 
                 NIconButton {
                   icon: "close"
-                  sizeRatio: 0.6
+                  baseSize: miniButtonSize
                   colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight)
                   colorBg: Color.mOnSurface
                   colorFg: Color.mOnPrimary

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -298,7 +298,7 @@ ColumnLayout {
 
               NIconButton {
                 icon: "close"
-                sizeRatio: 0.8
+                baseSize: Style.baseWidgetSize * 0.8
                 Layout.alignment: Qt.AlignVCenter
                 Layout.rightMargin: Style.marginXS * scaling
                 onClicked: {

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -177,8 +177,8 @@ ColumnLayout {
       model: Quickshell.screens || []
       delegate: NCheckbox {
         Layout.fillWidth: true
-        label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}`
-        description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})`
+        label: modelData.name || "Unknown"
+        description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
         checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
         onToggled: checked => {
                      if (checked) {

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -87,19 +87,9 @@ ColumnLayout {
           anchors.margins: Style.marginL * scaling
           spacing: Style.marginXXS * scaling
 
-          NText {
-            text: (`${modelData.name}: ${modelData.model}` || "Unknown")
-            font.pointSize: Style.fontSizeL * scaling
-            font.weight: Style.fontWeightBold
-            color: Color.mPrimary
-          }
-
-          NText {
-            text: `Resolution: ${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})`
-            font.pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-            wrapMode: Text.WordWrap
-            Layout.fillWidth: true
+          NLabel {
+            label: modelData.name|| "Unknown"
+            description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
           }
 
           // Scale
@@ -134,8 +124,8 @@ ColumnLayout {
 
                 NIconButton {
                   icon: "refresh"
-                  sizeRatio: 0.8
-                  tooltipText: "Reset scaling"
+                  baseSize: Style.baseWidgetSize * 0.9
+                  tooltipText: "Reset scaling."
                   onClicked: ScalingService.setScreenScale(modelData, 1.0)
                   anchors.right: parent.right
                   anchors.verticalCenter: parent.verticalCenter

Modules/SettingsPanel/Tabs/DockTab.qml

@@ -100,8 +100,8 @@ ColumnLayout {
       model: Quickshell.screens || []
       delegate: NCheckbox {
         Layout.fillWidth: true
-        label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}`
-        description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})`
+        label: modelData.name || "Unknown"
+        description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
         checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
         onToggled: checked => {
                      if (checked) {

Modules/SettingsPanel/Tabs/NotificationTab.qml

@@ -60,8 +60,8 @@ ColumnLayout {
       model: Quickshell.screens || []
       delegate: NCheckbox {
         Layout.fillWidth: true
-        label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}`
-        description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})`
+        label: modelData.name || "Unknown"
+        description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
         checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
         onToggled: checked => {
                      if (checked) {