From c81d6865a7103745bb6c9ef4b17b00b4f0befc7c Mon Sep 17 00:00:00 2001 From: Duncan Tourolle Date: Fri, 28 Aug 2026 08:30:15 +0200 Subject: [PATCH] Stop the name field running through the buttons under it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- ui/dr-ui/ui/identity.slint | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/ui/dr-ui/ui/identity.slint b/ui/dr-ui/ui/identity.slint index 4ca96bc..3bbbb60 100644 --- a/ui/dr-ui/ui/identity.slint +++ b/ui/dr-ui/ui/identity.slint @@ -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);