Fix model usage layout on vertical bar

shell/plugins/model-usage/Widget.qml

@@ -313,37 +313,25 @@ BarWidget {
     function openSettings(): string { root.openSettings(); return "ok" }
   }
 
-  Item {
-    id: button
-    anchors.fill: parent
-    implicitWidth: barRow.implicitWidth + 10
-    implicitHeight: root.bar ? root.bar.barSize : 26
-
-    Row {
-      id: barRow
-      anchors.centerIn: parent
-      spacing: 8
-
-      Repeater {
-        model: providers
-
-        Item {
+  component UsageChip: Item {
     id: chip
+
     required property var modelData
     required property int index
     readonly property real pct: root.usagePercent(modelData)
+    readonly property bool compact: root.vertical
     readonly property bool tooltipHovered: mouseArea.containsMouse
 
-          width: chipRow.implicitWidth
-          height: root.bar ? root.bar.barSize : 26
+    width: compact ? root.barSize : chipRow.implicitWidth
+    height: compact ? Math.max(root.barSize, chipColumn.implicitHeight + Style.space(2)) : root.barSize
 
     Row {
       id: chipRow
+      visible: !chip.compact
       anchors.centerIn: parent
       spacing: 4
 
       Image {
-              id: chipIcon
         source: root.iconSourceForProvider(chip.modelData)
         width: 13
         height: 13
@@ -364,6 +352,34 @@ BarWidget {
       }
     }
 
+    Column {
+      id: chipColumn
+      visible: chip.compact
+      anchors.centerIn: parent
+      spacing: 1
+
+      Image {
+        source: root.iconSourceForProvider(chip.modelData)
+        width: 13
+        height: 13
+        sourceSize.width: 13
+        sourceSize.height: 13
+        fillMode: Image.PreserveAspectFit
+        anchors.horizontalCenter: parent.horizontalCenter
+        opacity: chip.pct >= 0.9 ? 0.75 : 1
+      }
+
+      Text {
+        width: root.barSize
+        text: root.formatUsagePercent(chip.modelData)
+        color: chip.pct >= 0.9 ? urgent : foreground
+        font.family: fontFamily
+        font.pixelSize: 10
+        font.bold: chip.pct >= 0.9
+        horizontalAlignment: Text.AlignHCenter
+      }
+    }
+
     property var registeredBar: null
 
     function triggerPress(button) {
@@ -395,14 +411,16 @@ BarWidget {
       onClicked: function(mouse) { root.handleChipPress(chip.index, mouse.button, chip) }
     }
   }
-      }
 
-      Item {
+  component EmptyUsageChip: Item {
     id: emptyChip
-        visible: providers.length === 0
-        width: emptyLabel.implicitWidth
-        height: root.bar ? root.bar.barSize : 26
+
     readonly property bool tooltipHovered: emptyMouse.containsMouse
+
+    visible: providers.length === 0
+    width: root.vertical ? root.barSize : emptyLabel.implicitWidth
+    height: root.barSize
+
     property var registeredBar: null
 
     function triggerPress(button) {
@@ -444,6 +462,39 @@ BarWidget {
       onClicked: function(mouse) { root.handleChipPress(0, mouse.button, emptyChip) }
     }
   }
+
+  Item {
+    id: button
+    anchors.fill: parent
+    implicitWidth: root.vertical ? root.barSize : barRow.implicitWidth + Style.space(10)
+    implicitHeight: root.vertical ? barColumn.implicitHeight : root.barSize
+
+    Row {
+      id: barRow
+      visible: !root.vertical
+      anchors.centerIn: parent
+      spacing: Style.space(8)
+
+      Repeater {
+        model: providers
+        UsageChip { visible: !root.vertical }
+      }
+
+      EmptyUsageChip { visible: !root.vertical && providers.length === 0 }
+    }
+
+    Column {
+      id: barColumn
+      visible: root.vertical
+      anchors.centerIn: parent
+      spacing: Style.space(2)
+
+      Repeater {
+        model: providers
+        UsageChip { visible: root.vertical }
+      }
+
+      EmptyUsageChip { visible: root.vertical && providers.length === 0 }
     }
   }