diff --git a/ui/dr-ui/ui/launch.slint b/ui/dr-ui/ui/launch.slint index 6e3f669..1a05090 100644 --- a/ui/dr-ui/ui/launch.slint +++ b/ui/dr-ui/ui/launch.slint @@ -93,15 +93,37 @@ export component LaunchScreen inherits Rectangle { init => { self.focus(); } } - VerticalLayout { - alignment: center; - padding: Theme.gap-lg; + // Scrollable, and it has to be. The signed-out screen offers three routes + // — browser sign-in, an app password, a folder — and the column is taller + // than a laptop window in a side-by-side split, let alone a phone. A + // centred `VerticalLayout` that overflows clips at *both* ends, so the + // masthead and the last route disappear together and there is no + // indication either existed. + // + // `viewport-height` follows the content rather than being fixed: the + // screen's height changes by hundreds of pixels as it moves between + // signed-out, awaiting approval, and signed-in, and a constant would + // either strand a scrollbar on the short states or clip the tall one. + Flickable { + viewport-height: max(self.height, column.preferred-height); + + column := VerticalLayout { + width: 100%; + alignment: start; + padding: Theme.gap-lg; + // Centres the column when it fits and lets it start at the top + // when it does not — the two cases the fixed `alignment: center` + // could not both serve. + padding-top: max( + Theme.gap-lg, + (root.height - card.preferred-height - 2 * Theme.gap-lg) / 2 + ); Rectangle { max-width: 460px; horizontal-stretch: 0; - VerticalLayout { + card := VerticalLayout { spacing: Theme.gap-lg; // --- masthead --- @@ -423,5 +445,6 @@ export component LaunchScreen inherits Rectangle { } } } + } } }