minimum width for system monitoring topbar widgets

Modules/TopBar/CpuMonitor.qml

@@ -92,6 +92,24 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: cpuBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100%"
+            }
+
+            width: Math.max(cpuBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
 
     }

Modules/TopBar/CpuTemperature.qml

@@ -92,6 +92,24 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: tempBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100°"
+            }
+
+            width: Math.max(tempBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
 
     }

Modules/TopBar/GpuTemperature.qml

@@ -166,6 +166,24 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: gpuTempBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100°"
+            }
+
+            width: Math.max(gpuTempBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
 
     }

Modules/TopBar/NetworkMonitor.qml

@@ -80,6 +80,24 @@ Rectangle {
                 font.weight: Font.Medium
                 color: Theme.surfaceText
                 anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignLeft
+                elide: Text.ElideNone
+
+                StyledTextMetrics {
+                    id: rxBaseline
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                    text: "88.8 MB/s"
+                }
+
+                width: Math.max(rxBaseline.width, paintedWidth)
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: 120
+                        easing.type: Easing.OutCubic
+                    }
+                }
             }
 
         }
@@ -100,6 +118,24 @@ Rectangle {
                 font.weight: Font.Medium
                 color: Theme.surfaceText
                 anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignLeft
+                elide: Text.ElideNone
+
+                StyledTextMetrics {
+                    id: txBaseline
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                    text: "88.8 MB/s"
+                }
+
+                width: Math.max(txBaseline.width, paintedWidth)
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: 120
+                        easing.type: Easing.OutCubic
+                    }
+                }
             }
 
         }

Modules/TopBar/RamMonitor.qml

@@ -92,6 +92,24 @@ Rectangle {
             font.weight: Font.Medium
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideNone
+
+            StyledTextMetrics {
+                id: ramBaseline
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                text: "100%"
+            }
+
+            width: Math.max(ramBaseline.width, paintedWidth)
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 120
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
 
     }

Widgets/StyledTextMetrics.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+TextMetrics {
+    property bool isMonospace: false
+
+    readonly property string resolvedFontFamily: {
+        const requestedFont = isMonospace ? SettingsData.monoFontFamily : SettingsData.fontFamily
+        const defaultFont = isMonospace ? SettingsData.defaultMonoFontFamily : SettingsData.defaultFontFamily
+
+        if (requestedFont === defaultFont) {
+            const availableFonts = Qt.fontFamilies()
+            if (!availableFonts.includes(requestedFont)) {
+                return isMonospace ? "Monospace" : "DejaVu Sans"
+            }
+        }
+        return requestedFont
+    }
+
+    font.pixelSize: Appearance.fontSize.normal
+    font.family: resolvedFontFamily
+    font.weight: SettingsData.fontWeight
+}