perf: hold the process list at five rows

The list fills about 2s after the page opens and can show fewer than five
rows, which resized the CPU card and shifted every card below it. A
FontMetrics-sized Column keeps the height fixed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 41 insertions, 29 deletions

diff --git a/desktop/modules/perf/PerfPanel.qml b/desktop/modules/perf/PerfPanel.qml
index 8c9773d..784284a 100644
--- a/desktop/modules/perf/PerfPanel.qml
+++ b/desktop/modules/perf/PerfPanel.qml
@@ -234,35 +234,47 @@ Column {
                 }
             }
         }
-        Repeater {
-            model: panel.procs.slice().sort((a, b) => b[panel.procBy] - a[panel.procBy]).slice(0, 5)
-            // Two right-aligned columns of fixed width, so the numbers line
-            // up down the table whatever their length.
-            delegate: Item {
-                required property var modelData
-                width: parent.width
-                implicitHeight: nameText.implicitHeight
-                Label {
-                    id: nameText
-                    anchors { left: parent.left; right: cpuText.left; rightMargin: 8 }
-                    text: modelData.name
-                    elide: Text.ElideRight
-                }
-                Label {
-                    id: cpuText
-                    anchors.right: memText.left
-                    width: panel.fs * 4
-                    horizontalAlignment: Text.AlignRight
-                    text: modelData.cpu.toFixed(1) + "%"
-                    font.features: { "tnum": 1 }
-                }
-                Label {
-                    id: memText
-                    anchors.right: parent.right
-                    width: panel.fs * 4.5
-                    horizontalAlignment: Text.AlignRight
-                    text: P.bytes(modelData.mem)
-                    font.features: { "tnum": 1 }
+        // Five rows tall whatever the count, so the card never jumps.
+        Column {
+            width: parent.width
+            height: 5 * rowMetrics.height + 4 * spacing
+            spacing: 8
+
+            FontMetrics {
+                id: rowMetrics
+                font { family: Theme.fontFamily; pixelSize: panel.fs }
+            }
+
+            Repeater {
+                model: panel.procs.slice().sort((a, b) => b[panel.procBy] - a[panel.procBy]).slice(0, 5)
+                // Two right-aligned columns of fixed width, so the numbers line
+                // up down the table whatever their length.
+                delegate: Item {
+                    required property var modelData
+                    width: parent.width
+                    implicitHeight: nameText.implicitHeight
+                    Label {
+                        id: nameText
+                        anchors { left: parent.left; right: cpuText.left; rightMargin: 8 }
+                        text: modelData.name
+                        elide: Text.ElideRight
+                    }
+                    Label {
+                        id: cpuText
+                        anchors.right: memText.left
+                        width: panel.fs * 4
+                        horizontalAlignment: Text.AlignRight
+                        text: modelData.cpu.toFixed(1) + "%"
+                        font.features: { "tnum": 1 }
+                    }
+                    Label {
+                        id: memText
+                        anchors.right: parent.right
+                        width: panel.fs * 4.5
+                        horizontalAlignment: Text.AlignRight
+                        text: P.bytes(modelData.mem)
+                        font.features: { "tnum": 1 }
+                    }
                 }
             }
         }