Stop the name field running through the buttons under it

The Identity header was two rows pinned to 32px and 36px. Neither number was big
enough for what the row held: a `Field` is `Theme.touch-target` — 44px — and a
`Button` is `Theme.control-height`.

Slint honours a child's own height and lets it overflow the box the layout gave
it, so the name field drew 44px from the top of a 32px row while the button
strip began at 38px. The overlap was 6px of text box sitting on top of "Confirm
all".

Neither row states a height any more. The first takes the height of what is in
it, and the strip takes the height of a control — read from the theme rather
than from the row inside it, since `actions` sizes itself from the Flickable's
viewport and measuring it back would be a binding loop.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-28 08:30:15 +02:00
co-authored by Claude Opus 5
parent 1d4c3348af
commit c81d6865a7
+13 -2
View File
@@ -403,9 +403,17 @@ export component IdentityScreen inherits Rectangle {
// is the fault library.slint's filter bar documents at length. The
// faces grid is a sibling of this row, so it would have been laid
// out against a width that was never on the screen.
//
// **Neither row states a height.** The first version of this pinned
// them to 32px and 36px, which are smaller than what they contain:
// a `Field` is `Theme.touch-target` (44px) tall and a `Button` is
// `Theme.control-height`. Slint honours the child's own height and
// lets it overflow the box it was given, so the name field ran 12px
// past its row and straight through the buttons 6px below it. Rows
// take the height of what is in them; the strip takes the height of
// a control.
HorizontalLayout {
spacing: Theme.gap-sm;
height: 32px;
// Naming a cluster *is* the primary action of this screen, so
// the name is an editable field on sight rather than something
@@ -444,7 +452,10 @@ export component IdentityScreen inherits Rectangle {
// merely absent. Same device as the library's filter chips, for
// the same reason.
Flickable {
height: 36px;
// A control's height, not a guess, and not read back from the
// row inside — `actions` sizes itself from `viewport-height`,
// so measuring it here would be a binding loop.
height: Theme.control-height;
viewport-height: self.height;
viewport-width: max(self.width, actions.preferred-width);