bar: wrap onto two rows when one row doesn't fit

On narrow outputs (portrait rotation) the single-row layout overflowed.
Compare the needed width (implicit sizes of all three clusters) against
the window width; when it doesn't fit, double the bar height and move
the metric pills to a second row, keeping workspaces + clock/tray on
the first.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

widgets/Bar.qml

@@ -29,7 +29,20 @@ PanelWindow {
         left: true
         right: true
     }
-    implicitHeight: Theme.barHeight
+
+    // Wrap onto two rows when a single row can't hold everything (portrait
+    // outputs). Needed width is computed from implicit sizes, which don't
+    // depend on which row anything sits in, so this can't bind-loop.
+    readonly property real neededWidth:
+        (Theme.gap + 2) * 2                 // outer margins
+        + workspaces.implicitWidth
+        + Theme.gap * 4                     // breathing room between clusters
+        + metricsRow.implicitWidth
+        + Theme.gap
+        + endRow.implicitWidth
+    readonly property bool twoRows: width > 0 && neededWidth > width
+
+    implicitHeight: twoRows ? Theme.barHeight * 2 : Theme.barHeight
 
     // background strip
     Rectangle {
@@ -37,19 +50,35 @@ PanelWindow {
         color: Theme.barColor
     }
 
-    // left: workspaces
+    // row 1 left: workspaces
     Workspaces {
+        id: workspaces
         anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
         anchors.leftMargin: Theme.gap + 2
+        y: (Theme.barHeight - height) / 2
         screen: panel.modelData
     }
 
-    // right: battery, system metrics, volume, clock, tray
+    // row 1 right: clock, tray
     RowLayout {
+        id: endRow
         anchors.right: parent.right
-        anchors.verticalCenter: parent.verticalCenter
         anchors.rightMargin: Theme.gap + 2
+        y: (Theme.barHeight - height) / 2
+        spacing: Theme.gap
+
+        Clock {}
+        Tray { panelWindow: panel }
+    }
+
+    // metrics: left of the clock in one-row mode, own second row when narrow
+    RowLayout {
+        id: metricsRow
+        anchors.right: panel.twoRows ? parent.right : endRow.left
+        anchors.rightMargin: panel.twoRows ? Theme.gap + 2 : Theme.gap
+        y: panel.twoRows
+            ? Theme.barHeight + (Theme.barHeight - height) / 2
+            : (Theme.barHeight - height) / 2
         spacing: Theme.gap
 
         Battery {}
@@ -59,7 +88,5 @@ PanelWindow {
         Disk {}
         Network {}
         Volume {}
-        Clock {}
-        Tray { panelWindow: panel }
     }
 }