vm: right-align unused image sizes

The name and size were one string, so sizes started wherever the name
ended and a column of them could not be scanned. The size is now its own
right-anchored Text in the main text colour, and a long name elides in the
middle instead of pushing it.

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

1 files changed, 17 insertions, 5 deletions

diff --git a/desktop/modules/vm/VmPage.qml b/desktop/modules/vm/VmPage.qml
index 2ac57f0..d838bf6 100644
--- a/desktop/modules/vm/VmPage.qml
+++ b/desktop/modules/vm/VmPage.qml
@@ -240,13 +240,25 @@ Column {
     // What prune would delete: images no container uses.
     Repeater {
         model: Docker.unused
-        Text {
+        Item {
             required property var modelData
             width: page.width
-            elide: Text.ElideMiddle
-            text: `${modelData.name}  ${modelData.size}`
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
-            color: Theme.overlay
+            implicitHeight: imgName.implicitHeight
+            Text {
+                id: imgName
+                anchors { left: parent.left; right: imgSize.left; rightMargin: 12 }
+                elide: Text.ElideMiddle
+                text: modelData.name
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
+                color: Theme.overlay
+            }
+            Text {
+                id: imgSize
+                anchors.right: parent.right
+                text: modelData.size
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
+                color: Theme.text
+            }
         }
     }