Give the develop strip room for its controls on a tablet

The render backend, the layout class and the frame rate are developer
readouts, and they were sitting in the middle of the one strip that also
carries the way out of develop, the undo pair, the panel toggle and
export. A HorizontalLayout given less width than its children's minimums
does not shrink them — it runs off the end.

A tablet in portrait is 768 logical pixels, which is not enough, so
everything from the panel toggle rightwards was pushed off the right-hand
edge. Below the breakpoint the develop column is *also* closed by
default, so a toggle that could not be reached meant the column could not
be opened at all — and copy and paste live in that column. That is the
whole of "I have no idea how to copy a setting on Android and apply it to
other images": there was no way to.

The three readouts now collapse to zero width below the breakpoint. Width
and not an `if`, because this strip is inside the layout that `expanded`
feeds and a conditional child here is the shape that has already caused
binding loops in this file — and because a `visible: false` child still
takes its slot in a layout, so hiding alone would have freed nothing.

ui/dr-ui/ui/app.slint

@@ -18,6 +18,9 @@ component StatusBar inherits Rectangle {
     in property <string> backend;
     in property <string> layout-class;
     in property <int> fps;
+    /// FR-UI-1: the layout class, so the instrumentation can stand down on a
+    /// strip too narrow to carry both it and the controls.
+    in property <bool> expanded: true;
     in property <string> filename;
     in property <string> position;
     /// Only offered where there is a library to go back to — with files named
@@ -78,19 +81,70 @@ component StatusBar inherits Rectangle {
             clicked => { root.back-to-library(); }
         }
 
-        // The backend is an identifying label, not a state — it says which
-        // path is in use, and it says the same thing whether that path is
-        // fast or slow. The accent it used to carry made every frame look
-        // like an alert; `fps` below is the thing here that can go wrong.
-        Label { text: root.backend; }
-
         Value { text: root.filename; compact: true; overflow: elide; }
 
         Caption { text: root.position; }
 
         Rectangle { horizontal-stretch: 1; }
 
-        Caption { text: root.layout-class; }
+        // --- instrumentation, and only where there is room for it ---------
+        //
+        // The render backend, the layout class and the frame rate are all
+        // developer readouts. They cost about 200 logical pixels of a strip
+        // that also carries the only way out of develop, the undo pair, the
+        // panel toggle and the export button — and a `HorizontalLayout` given
+        // less width than its children's minimums does not shrink them, it
+        // runs off the end.
+        //
+        // A tablet in portrait is 768 logical pixels, so that is exactly what
+        // happened: everything from the panel toggle rightwards was pushed off
+        // the right-hand edge. The develop column is *also* closed by default
+        // below the breakpoint, so the toggle being unreachable meant the
+        // column could not be opened at all — and with it went copy and paste,
+        // which live in it. Reported as "I have no idea how to copy a setting
+        // on Android and apply it to other images", and the answer was that
+        // there was no way to.
+        //
+        // Collapsed to zero width rather than wrapped in an `if`: this strip
+        // is inside the layout that `expanded` feeds, and a conditional child
+        // here is the shape that has already caused binding loops in this file
+        // (see the panel below). A `visible: false` child still takes its slot
+        // in a layout, so the width has to go as well.
+        Rectangle {
+            width: root.expanded ? diagnostics.preferred-width : 0px;
+            visible: root.expanded;
+            clip: true;
+
+            diagnostics := HorizontalLayout {
+                spacing: Theme.gap;
+
+                // The backend is an identifying label, not a state — it says
+                // which path is in use, and it says the same thing whether
+                // that path is fast or slow. The accent it used to carry made
+                // every frame look like an alert; `fps` below is the thing
+                // here that can go wrong.
+                Label {
+                    text: root.backend;
+                    vertical-alignment: center;
+                }
+
+                Caption {
+                    text: root.layout-class;
+                    vertical-alignment: center;
+                }
+
+                // Degraded performance, so this is a caution rather than an
+                // active state: the frame rate has fallen below what the
+                // compositing path is supposed to sustain, which is exactly
+                // the assumption A1 exists to test. `warn` is the one hue left
+                // in the palette and this earns it.
+                Caption {
+                    text: root.fps + " fps";
+                    warn: root.fps < 55;
+                    vertical-alignment: center;
+                }
+            }
+        }
 
         // Undo and redo, in the strip rather than in the develop column: the
         // panel can be put away, and the one control that takes back a
@@ -149,14 +203,6 @@ component StatusBar inherits Rectangle {
             clicked => { root.open-settings(); }
         }
 
-        // Degraded performance, so this is a caution rather than an active
-        // state: the frame rate has fallen below what the compositing path is
-        // supposed to sustain, which is exactly the assumption A1 exists to
-        // test. `warn` is the one hue left in the palette and this earns it.
-        Caption {
-            text: root.fps + " fps";
-            warn: root.fps < 55;
-        }
     }
 
     Rectangle {
@@ -1145,6 +1191,7 @@ in property <bool> panel-visible: true;
                 backend: root.backend;
                 layout-class: root.layout-class;
                 fps: root.fps;
+                expanded: root.expanded;
                 filename: root.filename;
                 position: root.total > 0 ? root.index + 1 + " / " + root.total : "";
                 // Only where a library was opened; command-line files have no