Give the range's ends a row of their own, not a corner of someone else's

Third attempt at one control, and each failure was a different reason it could
not be seen.

It narrowed to the whole library, because it took its span from a timeline zoom
that is zero until someone zooms. The fields that fixed that went into the chip
row, which scrolls sideways, so they sat past the right-hand edge. And moving
them "below the chips" put them inside the same `Rectangle` — which stacks its
children at the origin rather than laying them out, so they were drawn over the
chips inside a strip 34px tall, unconstrained in width and clipped in height.

A `Rectangle` is not a layout. The row is a sibling of the chips' strip in the
header's `VerticalLayout` now, with a height of its own and the width of the
window: two 108px fields, a "to", and a warning when what was typed is not a
date — about 354px, against 768 on a tablet in portrait.

Left-aligned and inset by the same gap the chips use, so the two rows begin on
one vertical line instead of a few pixels apart.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

ui/dr-ui/ui/library.slint

@@ -1760,29 +1760,44 @@ export component LibraryGrid inherits Rectangle {
                 }
             }
 
-            // The range's ends, on their own line.
-            //
-            // Not in the chip row above, which scrolls: fourteen chips
-            // already do not fit across a tablet in portrait, so anything
-            // added there lands past the right edge, where it has to be
-            // panned to. That is how "limit to range" managed to look
-            // broken twice — first because it narrowed to everything, and
-            // then because the controls that fixed that were off-screen.
-            //
-            // Costs nothing when there is no range: the row does not exist
-            // then.
-            //
-            // Turning the chip on used to be the whole control, and it took its
-            // span from the timeline's zoom — which is zero until someone
-            // zooms, so the range came out as the entire library and the button
-            // appeared to do nothing. The span is shown here and can be typed,
-            // so "limit to range" always narrows to something a person chose.
-            //
-            // Still seeded from the timeline: zooming to a fortnight and
-            // pressing the chip is the fast path, and these fields say which
-            // fortnight it landed on.
-            if root.range-active: HorizontalLayout {
+            Rectangle {
+                y: parent.height - 1px;
+                height: 1px;
+                background: Theme.rule;
+            }
+        }
+
+        // --- the date range's ends ---------------------------------------
+        //
+        // Its own strip, a sibling of the chips rather than a child of them.
+        //
+        // Twice now this control has looked broken. First it narrowed to the
+        // whole library, because it took its span from a timeline zoom that
+        // is zero until someone zooms. Then the fields that fixed that went
+        // into the chip row — which is 34px tall and scrolls sideways, so
+        // they were both clipped and off past the right-hand edge.
+        //
+        // A `Rectangle` stacks its children at the origin rather than laying
+        // them out, which is why putting a second row inside the chips' one
+        // drew it over them instead of under them. This is a row of the
+        // header's `VerticalLayout`, so it gets a line of its own and the
+        // width of the window.
+        if root.range-active: Rectangle {
+            height: 40px;
+            background: Theme.surface;
+
+            HorizontalLayout {
+                width: 100%;
+                height: 100%;
+                // The same leading inset the chips above use, so the two rows
+                // start on one vertical line rather than a few pixels apart.
+                padding-left: Theme.gap;
+                padding-right: Theme.gap;
                 spacing: Theme.gap-sm;
+                // Fixed-width fields and a two-letter word: left-aligned, so
+                // they sit under the chip that turned them on instead of
+                // spreading across the window.
+                alignment: start;
 
                 Field {
                     width: 108px;
@@ -1805,20 +1820,12 @@ export component LibraryGrid inherits Rectangle {
                     accepted(t) => { root.range-edited(root.range-from, t); }
                 }
 
-                // Says which end is wrong is beyond a caption, but saying
-                // that *something* is beats an empty grid with no reason.
                 if root.range-invalid: Caption {
                     text: "not a date";
                     warn: true;
                     vertical-alignment: center;
                 }
             }
-
-            Rectangle {
-                y: parent.height - 1px;
-                height: 1px;
-                background: Theme.rule;
-            }
         }
 
         // --- progress -----------------------------------------------------