NComboBox+SearchableComboBox: improved look when uiScaleRatio is not 100%

Modules/Panels/Settings/Tabs/GeneralTab.qml

@@ -90,7 +90,6 @@ ColumnLayout {
         placeholder: I18n.tr("settings.general.fonts.default.placeholder")
         searchPlaceholder: I18n.tr("settings.general.fonts.default.search-placeholder")
         popupHeight: 420
-        minimumWidth: 300
         isSettings: true
         defaultValue: Settings.getDefaultValue("ui.fontDefault")
         settingsPath: "ui.fontDefault"
@@ -105,7 +104,6 @@ ColumnLayout {
         placeholder: I18n.tr("settings.general.fonts.monospace.placeholder")
         searchPlaceholder: I18n.tr("settings.general.fonts.monospace.search-placeholder")
         popupHeight: 320
-        minimumWidth: 300
         isSettings: true
         defaultValue: Settings.getDefaultValue("ui.fontFixed")
         settingsPath: "ui.fontFixed"

Widgets/NComboBox.qml

@@ -7,8 +7,8 @@ import qs.Widgets
 RowLayout {
   id: root
 
-  property real minimumWidth: 200 * Style.uiScaleRatio
-  property real popupHeight: 180 * Style.uiScaleRatio
+  property real minimumWidth: 200
+  property real popupHeight: 180
 
   property string label: ""
   property string description: ""
@@ -19,7 +19,7 @@ RowLayout {
   property var defaultValue: ""
   property string settingsPath: ""
 
-  readonly property real preferredHeight: Style.baseWidgetSize * 1.1 * Style.uiScaleRatio
+  readonly property real preferredHeight: Math.round(Style.baseWidgetSize * 1.1)
   readonly property var comboBox: combo
 
   signal selected(string key)
@@ -135,8 +135,8 @@ RowLayout {
   ComboBox {
     id: combo
 
-    Layout.minimumWidth: root.minimumWidth
-    Layout.preferredHeight: root.preferredHeight
+    Layout.minimumWidth: Math.round(root.minimumWidth * Style.uiScaleRatio)
+    Layout.preferredHeight: Math.round(root.preferredHeight * Style.uiScaleRatio)
     implicitWidth: Layout.minimumWidth
     model: root.model
     currentIndex: root.findIndexByKey(root.currentKey)
@@ -148,8 +148,8 @@ RowLayout {
     }
 
     background: Rectangle {
-      implicitWidth: Style.baseWidgetSize * 3.75
-      implicitHeight: root.preferredHeight
+      implicitWidth: Math.round(Style.baseWidgetSize * 3.75 * Style.uiScaleRatio)
+      implicitHeight: Math.round(root.preferredHeight * Style.uiScaleRatio)
       color: Color.mSurface
       border.color: combo.activeFocus ? Color.mSecondary : Color.mOutline
       border.width: Style.borderS
@@ -188,7 +188,7 @@ RowLayout {
     popup: Popup {
       y: combo.height
       implicitWidth: combo.width - Style.marginM
-      implicitHeight: Math.min(root.popupHeight, listView.contentHeight + Style.marginM * 2)
+      implicitHeight: Math.min(Math.round(root.popupHeight * Style.uiScaleRatio), listView.contentHeight + Style.marginM * 2)
       padding: Style.marginM
 
       contentItem: ListView {

Widgets/NSearchableComboBox.qml

@@ -8,8 +8,8 @@ import qs.Widgets
 RowLayout {
   id: root
 
-  property real minimumWidth: 280 * Style.uiScaleRatio
-  property real popupHeight: 180 * Style.uiScaleRatio
+  property real minimumWidth: 280
+  property real popupHeight: 180
 
   property string label: ""
   property string description: ""
@@ -22,7 +22,7 @@ RowLayout {
   property var defaultValue: ""
   property string settingsPath: ""
 
-  readonly property real preferredHeight: Style.baseWidgetSize * 1.1
+  readonly property real preferredHeight: Math.round(Style.baseWidgetSize * 1.1)
 
   signal selected(string key)
 
@@ -171,8 +171,8 @@ RowLayout {
   ComboBox {
     id: combo
 
-    Layout.minimumWidth: root.minimumWidth
-    Layout.preferredHeight: root.preferredHeight
+    Layout.minimumWidth: Math.round(root.minimumWidth * Style.uiScaleRatio)
+    Layout.preferredHeight: Math.round(root.preferredHeight * Style.uiScaleRatio)
     implicitWidth: Layout.minimumWidth
     model: root.activeModel
     currentIndex: findIndexInActiveModel(currentKey)
@@ -183,8 +183,8 @@ RowLayout {
     }
 
     background: Rectangle {
-      implicitWidth: Style.baseWidgetSize * 3.75 * Style.uiScaleRatio
-      implicitHeight: preferredHeight
+      implicitWidth: Math.round(Style.baseWidgetSize * 3.75 * Style.uiScaleRatio)
+      implicitHeight: Math.round(root.preferredHeight * Style.uiScaleRatio)
       color: Color.mSurface
       border.color: combo.activeFocus ? Color.mSecondary : Color.mOutline
       border.width: Style.borderS
@@ -222,7 +222,7 @@ RowLayout {
     popup: Popup {
       y: combo.height
       width: combo.width
-      height: root.popupHeight + 60
+      height: Math.round((root.popupHeight + 60) * Style.uiScaleRatio)
       padding: Style.marginM
 
       contentItem: ColumnLayout {
@@ -334,8 +334,8 @@ RowLayout {
                           return Style.fontSizeXS;
                       }
                       color: highlighted ? Color.mOnHover : (badgeData && badgeData.color ? badgeData.color : Color.mOnSurface)
-                      Layout.preferredWidth: Style.baseWidgetSize * 0.6
-                      Layout.preferredHeight: Style.baseWidgetSize * 0.6
+                      Layout.preferredWidth: Math.round(Style.baseWidgetSize * 0.6)
+                      Layout.preferredHeight: Math.round(Style.baseWidgetSize * 0.6)
                       visible: badgeData && badgeData.icon !== undefined && badgeData.icon !== ""
                     }
                   }